Tagged: 

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • June 7, 2015 at 7:19 pm #455659
    jugalbandi3

    Hello,

    i use the masonry gallery full width with the setting: “All images get the same width, but are displayed with their original height and width ratio.” All original images i use have the same height and width.

    Is it possible to adjust the masonry effect to an equal number of images per row?

    Currently, depending on the width of the screen, i got for example 4 Elements in a row and 2 drawn in the next – 2×3 would make more sense.

    For example: in full screen i have 6 Pictures in one row. When i decrease the window width, i got 4 Pictures in the first row, and 2 in the second row. This creates an unsightly gap in the second row. If I could choose the setting: “always the same number of images per row” would be wonderful!

    Thank you in advance for response!
    Jugalbandi

    June 8, 2015 at 4:16 pm #456165
    Yigit

    Hi jugalbandi3!

    Please add following code to Quick CSS in Enfold theme options under General Styling tab

    .home #av-masonry-1 a {
  width: 33.33%;
}

    Cheers!
    Yigit

    June 8, 2015 at 4:55 pm #456194
    Elliott

    Hi jugalbandi3!

    So when you resize your browser window your wanting the gallery to stick to 6 columns and then as the screen get smaller your wanting it to go to 2 columns automatically and skip the 3 column layout?

    If that is correct then try commenting out lines 2517 – 2522 in /enfold/css/shortcodes.css.

    @media only screen and (min-width: 767px) and (max-width: 989px) {
	.responsive .av-masonry-col-flexible.av-masonry-gallery .av-masonry-entry{width:33.3%;}
	.responsive .av-masonry-col-flexible.av-masonry-gallery .av-masonry-entry.av-landscape-img{width:66.6%;}
	.responsive .av-masonry-col-automatic .av-masonry-entry .av-masonry-entry-title{font-size:13px;}
	.responsive .av-masonry-entry .av-masonry-entry-title+.av-masonry-entry-content{display:none;}
}

    Best regards,
    Elliott

    June 8, 2015 at 4:58 pm #456197
    jugalbandi3

    Hello Yigit,

    thank you for response and the code-snippet! Unfortunately it does not work as desired. Hereby I get 2 gaps between the pictures, depending on the width of the screen, Please have a look to the site again – thanks.

    Perhaps a different approach is successfully: is it possible to limit the display to one column, in all resolutions?

    Thank you once again for Support!

    Greetings,
    Jugalbandi

    June 8, 2015 at 5:18 pm #456219
    jugalbandi3

    Hello Elliott,

    sorry, if I did not express myself properly. I try it again:
    In full Screen the gallery sticks to 6 columns, all next to each other over the full width – thats as desired.
    in 1024 × 768 and also in 768 × 1024 i got 3 Images in 2 rows / each 3 pictures in 2 lines – that`s fine too.
    in 480 × 640 there are 6 Images in 1 row / all among themselves – good as well

    The problem appears in a resolution between these standard values. Then i got 4 Images in the first row and 2 Images in the second row. And in the second row therefor is a gap, it looks as if images are missing.

    If the setting: “always the *same_number* of images per row” is not possible, a different approach would be helpfull: to limit the display to one column / in other words: all images always in one row.

    Thank you again for Support!

    With best regards,
    Jugalbandi

    June 9, 2015 at 8:33 am #456504
    Ismael

    Hi!

    Alright. Just add this in the Quick CSS field to adjust the default width of the masonry items:

    .av-masonry-entry {
  width: 16.66%;
}

    Cheers!
    Ismael

    June 9, 2015 at 9:55 am #456551
    jugalbandi3

    Hi Ismael,

    this solution works! Thanks for the great support!

    With best regards,
    Jugalbandi

  • Author
    Posts
Viewing 7 posts - 1 through 7 (of 7 total)
  • The topic ‘Masonry Gallery – same number of images per row’ is closed to new replies.