Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #858448

    Hi,

    On the home page of http://www.tweha.com/ we have an easy slider full width and a transparent header. Each of the slides has a (sometimes rather long) caption title centered framed. It looks good on nearly all screens/devices. Because the caption on mobile was placed too low in the slide (not centered?), I added the following code in my child theme’s CSS:

    @media screen and (max-width: 360px) {
    .responsive #top .slideshow_caption {
        padding-top: 20px !important;
    }
    }
    

    This works well in FF when I reduce my screen size to mobile size and (strangely enough) works well too on the standard internet browser of my (Samsung) mobile, however it does not work on small (portrait) mobile screens using Chrome. My client reports the same problem on his phone.

    Reducing the font size does not really help because of the quite long text, which sometimes covers 3 lines on a small mobile screen.

    Any advise what to do to make this work well on all devices?

    Thanks & regards,
    Monique

    #859059

    Hey Monique,

    Thank you for using Enfold.

    Please try to increase the viewport max-width from 360px to 480px or higher. The portrait size or pixel resolution of an iPhone6 plus for example is 414x736px.

    Best regards,
    Ismael

    #859579

    Thanks Ismael,

    That works!

    Can you please flag this topic as closed?

    Have a nice day,
    Monique

    #859961

    Hi,

    Glad it worked. We’ll close the thread now. :)

    Best regards,
    Ismael

Viewing 4 posts - 1 through 4 (of 4 total)

The topic ‘Issue with slider captions on mobile’ is closed to new replies.