Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • April 6, 2017 at 5:19 am #772948
    santanin

    Hi. You helped me out in a previous post to make certain elements look nice on an iPad Mini portrait and landscape view due to columns squeezing together. See this post: https://kriesi.at/support/topic/make-ipad-mini-portrait-have-same-layout-as-mobile-phone/

    In that post, you provided CSS to make a grid layout behave like it does on a mobile device when using an iPad Mini. And it worked beautifully. Now, could you also provide CSS to make a Masonry Gallery be laid out on an iPad Mini as if it was laid out on a mobile device? On a mobile, a masonry gallery has each image stacked on top of each with the title and excerpt showing. It looks awesome. However, on an iPad Mini, whether in landscape or portrait view, the title and excerpt cover more than half the image and it looks terrible. I want the masonry gallery on an iPad Mini to look like as it was on a mobile and have the images stack on top of each other.

    Thank you!

    April 10, 2017 at 6:11 am #775269
    Ismael

    Hey santanin,

    Thank you for using Enfold.

    Please post the url to the page with the gallery so that we can inspect it. You have two options, one is to increase the height of the image container and the other option is to hide the title and caption container on mobile.

    Increase image container:

    @media only screen and (max-width: 989px) {
  .av-fixed-size .av-masonry-entry .av-inner-masonry-sizer {
      padding-bottom: 140%;
  }
}

    Hide title container on mobile:

    @media only screen and (max-width: 989px) {
  .av-inner-masonry-content {
    display: none;
  }
}

    Best regards,
    Ismael

  • Author
    Posts
Viewing 2 posts - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.