Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • July 6, 2017 at 10:32 am #817126
    bakbek

    Hi, how can I make the masonry titles be smaller and more readable on mobile – https://www.screencast.com/t/LEoqSuTC – without changing them on desktop?

    July 6, 2017 at 11:25 am #817149
    Sarah

    Hey!

    To make CSS work only for certain device widths, you can consult this page: https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

    For the masonry titles, you can use this CSS:

    @media only screen and (max-width: 1024px) {
   .av-image-caption-overlay-center {font-size:0.8em !important}   
}

    You can decrease the value of the font-size to suit your preference. The default value is 1.3em.

    I hope that helps!

    Best regards,
    Sarah

    July 6, 2017 at 12:55 pm #817206
    bakbek

    Hi Sarah, it seems as that makes no change.

    July 6, 2017 at 3:50 pm #817306
    Sarah

    Hi,

    It looks like the element has changed since the last time I checked it. Sorry about that.
    Please try this code instead:

    @media only screen and (max-width: 1024px) {
   h3.av-masonry-entry-title.entry-title {font-size:20px !important}   
}

    Best regards,
    Sarah

    July 6, 2017 at 4:03 pm #817314
    bakbek

    Great, that worked. Thanks!

    Another issue I noticed is this – https://www.screencast.com/t/HMdCsD1mwYJ – the text that is showing on top of the images on desktop is not showing on mobile. Why is that?

    July 6, 2017 at 5:49 pm #817399
    Sarah

    Great! :) You’re welcome.

    We’ll close this thread now, since you’ve opened another thread for that other issue.

    Best regards,
    Sarah

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘How to decrease font title size in masonry gallery on mobile’ is closed to new replies.