Follow on from previous thread about responsive text size in slider

Hey Yigit, I can see you’re busy on the form but seem to have missed my post?
Cheers

Sorry about that, we updated the page name to http://gd3.geneticdigital.co.uk/downloads/app-development/

Thanks for taking a look

Hi
Thanks for your reply, but this script doesn’t seem to make any difference. It’s not displaying correctly in landscape or portrait in a Nexus 7 and iPhone 5, both the title and the caption text.
Thanks

Hi there, this doesn’t seem to work correctly on the Nexus 7 or iPhone. I’ve removed the script from the Quick CSS because it wasn’t making any difference. I couldn’t see how to post images so this is

iPhone portrait – https://www.dropbox.com/s/iegv6jlw3hxume3/photo%201.PNG
iPhone landscape – https://www.dropbox.com/s/cqigc379h203e64/photo%202.PNG
Nexus 7 portrait – https://www.dropbox.com/s/2yq8nhzccg4ussd/Screenshot_2014-03-28-13-08-35.png

Hope you can help.
Thanks

Hi there

With all the other code snippets you have suggested above?

Cheers

I’ve added all of the code you suggested but it doesn’t seem to make any difference:

This is now in the Quick CSS

@media only screen and (max-width: 479px) {.responsive #top .slideshow_caption h2 {
font-size: 14px;}
.caption_framed .slideshow_caption .avia-caption-content p, .caption_framed .slideshow_caption .avia-caption-title, .avia-caption .avia-caption-content p, .avia-caption .avia-caption-title { padding: 2px; }}
@media only screen and (max-width: 990px) and (min-width: 768px) {div .slideshow_caption h2 { font-size: 18px; }}
@media only screen and (max-width: 990px) and (min-width: 768px) {div .slideshow_caption h2 { font-size: 18px !important; }}
@media only screen and (max-width: 500px) { .caption_framed .slideshow_caption .avia-caption-content p, .caption_framed .slideshow_caption .avia-caption-title, .avia-caption .avia-caption-content p, .avia-caption .avia-caption-title { padding: 2px!important; }

I’ve checked against the screen shots I sent but nothing looks any different. The Nexus screen shot above doesn’t seem to work so I’ve added it here again:
https://www.dropbox.com/s/2yq8nhzccg4ussd/Screenshot_2014-03-28-13-08-35.png

Is there a conflict with what has been put into the custom.css?

Mobile Styles
================================================== */
/* Note: Add new css to the media query below that you want to only effect the Mobile and Tablet Portrait view */

@media only screen and (max-width: 767px) {
  /* Add your Mobile Styles here */
}

@media only screen and (max-width: 767px) {
.avia-slideshow .avia-caption .avia-caption-title { font-size: 18px; padding: 2px; }
}

@media only screen and (max-width: 480px) { 
.avia-caption{ padding: 0; bottom: 3px; }
.avia-caption .avia-caption-content p {padding: 2px;}
}

Cheers

• This reply was modified 10 years, 7 months ago by Rustybucket.

Hi, all browsers flushed but the only difference I can see is on the portrait iPhone https://www.dropbox.com/s/qs3zwnpyb6om3nh/photo.PNG
all it all looks squashed up and you can’t see all the text.

Thanks

Hi there, all good suggestions, thanks. I think I would prefer to make the text smaller rather than remove it. Please can you show me how to edit the heading size for mobile and the description size for mobile and I can play with it until we get it looking the way we want.

Many thanks

Excellent, do I just need this or do I need to add it to all the other Quick CSS?

Many thanks

Brilliant, many thanks for your help