Tagged: 

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • January 22, 2019 at 7:04 pm #1057385
    empiread201

    Hi, I’ve made an Masonry Gallery with image titles that display below all the time. There are 5 images and I set that section to display at five columns on large and medium screens. When it gets scaled down to medium screens, the image title covers the image (on the pics with longer titles). Is there a way to ensure that the image title stays below the image and doesn’t cover the picture? I tried some custom css in similar forums on this and nothing’s working.

    January 24, 2019 at 7:12 am #1058041
    Mike

    Hey empiread201,
    I took a look at your page and wrote this css to make the font size smaller and reduce the padding around the caption for medium screens. You can adjust to suit your needs. But for it to work best you should remove some of your css because I rewrote it with a media queries to control when it triggers.
    Please remove this from your child theme css:

    /*---Masonry Gallery----*/
#top #wrap_all figcaption.av-inner-masonry-content .av-masonry-entry-title {
    color: #f05a1a;
    text-align: center;
    font-weight: bold;
    font-size: 16px !important;
}

    Then add this css:

    @media only screen and (min-width: 998px) {
#top.home #wrap_all .av-masonry-col-5 figcaption.av-inner-masonry-content .av-masonry-entry-title {
    color: #f05a1a;
    text-align: center;
    font-weight: bold;
    font-size: 16px !important;
}
#top.home .av-masonry-col-5 .av-masonry-entry .av-inner-masonry-content {
    padding: 10px !important; 
}
} 
@media only screen and (max-width: 997px) { 
#top.home #wrap_all .av-masonry-col-5 figcaption.av-inner-masonry-content .av-masonry-entry-title {
    font-size: 8px !important;
}
#top.home .av-masonry-col-5 .av-masonry-entry .av-inner-masonry-content {
    padding: 4px !important; 
}
}

    Then Please clear your browser cache and check.

    Best regards,
    Mike

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