Tagged: ,

Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • June 17, 2014 at 11:52 am #279938
    dominic

    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

    June 17, 2014 at 1:34 pm #279976
    Ismael

    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://kriesi.at/documentation/enfold/updating-your-theme-files/

    Cheers!
    Ismael

    June 17, 2014 at 3:26 pm #280042
    dominic

    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

    June 17, 2014 at 7:24 pm #280179
    Yigit

    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

    June 17, 2014 at 8:14 pm #280196
    dominic

    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

    June 17, 2014 at 8:24 pm #280199
    Yigit

    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

    June 19, 2014 at 4:39 pm #281240
    dominic

    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

    June 21, 2014 at 9:37 am #281947
    Ismael

    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

    June 22, 2014 at 11:22 pm #282227
    dominic

    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 10 years, 6 months ago by dominic.
    June 23, 2014 at 8:39 am #282298
    Dude

    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

    June 23, 2014 at 1:24 pm #282432
    dominic

    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

    June 24, 2014 at 2:53 am #282795
    Josue

    Hey Dominic!

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

    Best regards,
    Josue

    June 24, 2014 at 10:54 am #282925
    dominic

    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

    June 26, 2014 at 7:53 am #283935
    Dude

    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

    June 26, 2014 at 10:57 am #283987
    dominic

    Great. Thanks a lot!
    Cheers
    Dominic

  • Author
    Posts
Viewing 15 posts - 1 through 15 (of 15 total)
  • The topic ‘Masonry Gallery Problem’ is closed to new replies.