Tagged: 

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • December 11, 2015 at 12:28 am #550779
    Julie

    Hello!

    I have a 5-column block of linked images with captions that display on hover.
    For mobile views, I set up a separate section with all images set to always display captions using a custom section ID.

    The only problem is on tablet views bigger than 767px– captions do not show, so viewers do not know they will be taken to a new page if they click the images.
    If I increase the screen size setting so that captions always display on mobile screens larger than 767, on larger screens, the caption text is too big and overflows.
    But the text is the perfect size on smaller mobile screens and desktop views, so I don’t want to reduce the size on everything.

    How can I adjust the section width so that on mobile device screens over 767 images are bigger and are in 3 or 4 columns instead of 5 (so captions fit and text doesn’t completely cover the whole image)?

    Links to the site and screenshot are below. Hope you can help.

    Thanks!

    December 12, 2015 at 12:23 pm #551427
    Ismael

    Hey Julie!

    Thank you for using Enfold.

    Use this code in the Quick CSS field in order to set the columns to 3 instead of 5 on tablet view:

    @media only screen and (min-width: 768px) and (max-width: 989px) {
#jal-discography1 .av_one_fifth {
    width: 33% !important;
    float: left !important;
    clear: none !important;
}
}

    Cheers!
    Ismael

    December 14, 2015 at 6:48 pm #552553
    Julie

    Hi Ismael,

    I had to change it to the other section so it’s the one that displays on the narrower views that is affected, but this works great now.

    Thank you so much for your help!

  • Author
    Posts
Viewing 3 posts - 1 through 3 (of 3 total)
  • The topic ‘How to reduce section width in mobile views so 5 columns becomes 3 or 4?’ is closed to new replies.