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