Archived

This topic is now archived and is closed to further replies.

  • 0

Feature Slider text is "crunched" to the left on iphone


Question

Posted · Report post

Have a look at http://www.pcgreens.com/ on an iphone.

The text at the bottom of the slider is pushed to the left and doesn't flow the full width of the feature. It needlessly forces more rows of text when it could extend the full width of the feature on a single line. Why is that? It looks really bad on an iPhone. How can I fix this? Also, can I reduce the font size on the feature text on an iPhone? I was playing around a little with the custom css to target different width screens with the @media function.

post-31389-0-84719600-1349941148_thumb.j

Share this post


Link to post
Share on other sites

3 answers to this question

Posted · Report post

Hi,

You could try something like this:


@media screen and (max-width: 600px) {
#feature_slider .fcontent .ftitle {
font-size: 16px;
}
}
@media screen and (max-width: 600px) {
#feature_slider .text-bottom .fcontent .ftext {
font-size: 12px;
}
}[/CODE]

Share this post


Link to post
Share on other sites

Posted · Report post

Thanks Danny, the text is indeed smaller but it doesn't stop the text from dropping prematurely to the next row. :/

Share this post


Link to post
Share on other sites

Posted · Report post

Hi there, the width on the slider is only set at 33% at the moment, so won't fill the entire slide.

Try the following css


#feature_slider .text-bottom .fcontent .fheading {

    width: 100%;

}

Share this post


Link to post
Share on other sites