Tagged: ,

Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • #279938

    Hi Krisi support team,

    I have a problem with the masonry gallery on my website. The problem is that the images are not aligned properly on all screen sizes. You may reproduce this error when you gradually decrease the browser window size. At some point the last image in a row will stop shifting to the first position in the next row, but will jump to the third position, leaving the two positions in the row empty. I only plugin I use is WPML (but disabling this plugin doesn’t solve the problem).

    Do you have a solution for that?

    Thank you and best regards

    Dominic

    #279976

    Hi dominic!

    First of all, nice set of photographs. :)

    I can’t seem to reproduce the issue on my end by resizing the Chrome browser. Please download the latest version from your 2.8.1 themeforest account then update the theme via FTP. Please refer to this link for more info: http://www.kriesi.at/documentation/enfold/updating-your-theme-files/

    Cheers!
    Ismael

    #280042

    Hi Ismael,

    my installation is up to date now, but the problem still persists.

    I should have mentioned that I observed the problem in Internet Explorer and Firefox only. Please check, if you can reproduce the error with one of these browsers. At my computer it looks like this.

    Any ideas?

    Thank you and best regards

    Dominic

    #280179

    Hi!

    I have checked your website on Firefox and it does work fine on my end – http://youtu.be/ABSK_nmExJM
    No issues on iphone 4 as well. I asked @ismael to take another look on Firefox. Let us wait to hear from him

    Cheers!
    Yigit

    #280196

    Hi Yigit and Ismael,

    okay, I realized that I was again not precise enough with my description of the problem. Sorry for that!
    The problem occurs only when there are four or more images in a row, e.g. on wide screen monitors. It is not present when the template has switched to three image mode as in the screencast.
    If you use firefox and zoom out with ctrl – until the page is small enough so that all five images are in one row and then slowly zoom in again you will see what I mean.

    Cheers!
    Dominic

    #280199

    Hi!

    Please try adding following code to Quick CSS

    @media only screen and (max-width: 1800px) and (min-width: 1340px) {
    a.post-3119.attachment.type-attachment.status-inherit.hentry.av-masonry-entry.isotope-item.av-masonry-item-with-image.av-masonry-item-loaded {
    left: 0!important;
    }}

    Best regards,
    Yigit

    #281240

    Hi Yigit,

    thanks for the solution. It works on FF but not on IE. Moreover, since the respective item is fixed now to the left side of the frame, the item order changes when the template switches to the three images in a row view. Then the item “Menschen” moves to the fifth position although it should be on the third position. Is there any better solution?

    Thanks and best regards

    Dominic

    #281947

    Hey!

    Thank you for the update.

    I still can’t reproduce the issue on my end. I did as your described, using the zoom function of the browsers and the masonry looks fine. My screen resolution is 1900×1000. These are the screenshots from IE and Firefox. Users barely use the zoom function so I don’t think you have to worry about this.

    Best regards,
    Ismael

    #282227

    Hi,

    thanks for your replay. It seems that this problem only affects my version of IE which is not a big issue.

    However, I have something else that bothers me. I would like to get the images in the masonry galleries (all except those galleries with big spacing between images) to stretch to the edge of the screen only in mobile mode (similar as if you would use the masonry gallery set to fullwidth). I came up with this:

    @media only screen and (max-width: 989px) {
    div#av-masonry-1.av-masonry.noHover.av-flex-size.av-no-gap.av-hover-overlay-.av-caption-always.av-masonry-gallery.avia_sortable_active {
    width: 106%;
    margin-left: -3%; }}

    @media only screen and (max-width: 767px) {
    div#av-masonry-1.av-masonry.noHover.av-flex-size.av-no-gap.av-hover-overlay-.av-caption-always.av-masonry-gallery.avia_sortable_active {
    width: 114%;
    margin-left: -7%; }}

    But this doesn’t work properly. More precisely: it works when you resize the window but not when you load the page. When the page is loaded the images will overlap at first until you resize the window which makes them stretch to fullwidth.

    What code do I have to add in ordern to achieve masonry images that stretch to fullwidth when loaded in mobile mode?

    Thanks and best regards

    Dominic

    • This reply was modified 3 months, 1 week ago by  dominic.
    #282298

    Hey!

    You can try to trigger resize event on page load – use this code:

    
    add_action('wp_head','avia_print_script', 10);
    function avia_print_script()
    {
        if(! is_page(2980)) return;
        echo "<script>";
        echo "setTimeout(function(){ jQuery(window).trigger('resize'); },100);";
        echo "</script>";
    }
    

    or

    
    add_action('wp_head','avia_print_script', 10);
    function avia_print_script()
    {
        if(! is_page(2980)) return;
        echo "<script>";
        echo "setTimeout(function(){ window.dispatchEvent(new Event('resize')); },100);";
        echo "</script>";
    }
    

    and insert it into the enfold/functions.php file or your child theme functions.php. Note that you might need to change the page id (2980) if you move the masonry gallery to another page.

    Best regards,
    Peter

    #282432

    Hey,

    thanks for your reply. Unfortunately it did not work. So could you provide me with some fresh CSS Code (ideally which is not specific to single galleries or pages) in order to stretch the images to fullwidth in mobile mode as desired?

    Best regards

    Dominic

    #282795

    Hey Dominic!

    Can you create a screenshot/mockup illustrating what would you want to achieve on mobile view?

    Best regards,
    Josue

    #282925

    Hey Josue,

    the mockup can be found here (actual state is on the left, desired state is on the right). So basically I want the masonry galleries (except those with large spacing between the images as on the portfolio page) to stretch to fullwidth when the screen is smaller than 989px. While the white border at the left and right side of the gallery is great when the screen is bigger than 989px, I would like to use it for the images when the screen is smaller (as seen on the mockup).

    And please forget about the code that I posted above. Instead I would like to know how you would solve this problem using CSS.

    Thank you and best regards

    Dominic

    #283935

    Hi!

    Try this code:

    
    @media only screen and (max-width: 767px){
    .responsive #top.page-id-2980 .container {
    margin: 0;
    }
    }
    

    It will remove the margins on the left/right and push the images to the left/right side of the viewport.

    Cheers!
    Peter

    #283987

    Great. Thanks a lot!
    Cheers
    Dominic

Viewing 15 posts - 1 through 15 (of 15 total)

The topic ‘Masonry Gallery Problem’ is closed to new replies.