Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • January 24, 2018 at 9:35 am #902000
    bakbek

    Hi, the masonry gallery is not really center aligned and it is very visible on mobile as you can see in the screenshot. How can make sure it is center aligned with equal spacing on both sides?

    January 25, 2018 at 5:50 am #902557
    Rikard

    Hey DROR,

    Please try this CSS:

    @media only screen and (max-width: 479px) {
.av-masonry-entry {
  left: 5% !important;
}
}

    Best regards,
    Rikard

    January 25, 2018 at 2:05 pm #902846
    bakbek

    Thanks! How can also align it in the desktop version?

    January 25, 2018 at 2:29 pm #902856
    Mike

    Hi,
    Please try:

    @media only screen and (min-width: 768px) and (max-width: 1023px) {#top.home div#av-masonry-1 {
  left: 3% !important;
}
}
@media only screen and (min-width: 1024px) and (max-width: 1439px) {#top.home div#av-masonry-1 {
  left: 2% !important;
}
}
@media only screen and (min-width: 1440px) {#top.home div#av-masonry-1 {
  left: 1% !important;
}
}

    Best regards,
    Mike

    January 25, 2018 at 2:36 pm #902858
    bakbek

    Hi, I noticed that when I added the previous code it moved the bottom masonry I have to the right. Is there a way to target only a specific masonry element on a page so any change I apply to it won’t effect other similar elements on the same page?

    January 25, 2018 at 2:49 pm #902860
    Mike

    Hi,
    Please try:

    @media only screen and (max-width: 479px) {
#top.home div#av-masonry-2 {
  left: 5% !important;
}
}

    Best regards,
    Mike

    January 25, 2018 at 3:01 pm #902863
    bakbek

    Perfect. Thanks!

    January 25, 2018 at 3:05 pm #902866
    Mike

    Hi,
    Glad we were able to help, we will close this now. Thank you for using Enfold.

    Best regards,
    Mike

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘How to center align the masonry gallery’ is closed to new replies.