Follow on from previous thread about responsive text size in slider

[Rustybucket]

Hi, in this thread https://kriesi.at/support/topic/responsive-bug-on-image-slider-text/ I was told how to change the responsive text within an Easy Slider which you can see from the code below. Please can you let me know how to make the text resize correctly with the Full Width Easy Slider (http://gd3.geneticdigital.co.uk/g-test-page/) as it’s not displaying correctly in landscape & portrait in a Nexus 7 and iPhone 5.

Thanks

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;}
}

[Rustybucket]

Hi guys, are you able to help with my question?
Thanks

[Rustybucket]

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

[Yigit]

Hey!

Test link you posted cannot be found. Can you please once again make sure to post the correct link so we can take a look?

Cheers!
Yigit

[Rustybucket]

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

Thanks for taking a look

[Yigit]

Hey!

Please add following code to Quick CSS

@media only screen and (max-width: 990px) and (min-width: 768px) {
div .slideshow_caption h2 { font-size: 18px; }}

Regards,
Yigit

[Rustybucket]

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

[Yigit]

Hey!

Please add following code to Quick CSS as well

@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; }}

And can you post a screenshot from your devices? When i resize browsers window i do not see an issue above 480px

Regards,
Yigit

[Rustybucket]

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

[Yigit]

Hey!

Please try adding following code to Quick CSS as well

@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; }
div .slideshow_caption h2 { font-size: 12px !important; }
.caption_framed .slideshow_caption .avia-caption-content p { line-height: 1em !important; }}

Regards,
Yigit

[Rustybucket]

Hi there

With all the other code snippets you have suggested above?

Cheers

[Yigit]

Hi!

Yes, please. Small screens and long text causes the issues :)

Regards,
Yigit

[Rustybucket]

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, 8 months ago by Rustybucket.

[Yigit]

Hey!

Please add following code to Quick CSS as well

@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 { line-height: 1em !important; }}

Please flush browser cache on your mobile devices after applying the code

Cheers!
Yigit

[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

[Yigit]

Hey!

It seems like only options are; making the font size smaller on mobile, changing height to fixed value ( which will look like this http://i.imgur.com/zhlBQxs.jpg ), removing the description section on mobile or making the text shorter

Regards,
Yigit

[Rustybucket]

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

[Yigit]

Hi!

You can use following code

@media only screen and (max-width: 479px) {
.responsive #top .slideshow_caption h2 {
font-size: 13px;
}
.caption_framed .slideshow_caption .avia-caption-content p {
font-size: 12px;
}}

In the example, 13px is for heading and 12px for content which would be applied on screens smaller than 479px

Best regards,
Yigit

[Rustybucket]

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

Many thanks

[Yigit]

Hi!

You just need to edit the last CSS code i posted to adjust the font size. Line height and paddings are set to minimum already

Cheers!
Yigit

[Rustybucket]

Brilliant, many thanks for your help

[Author]

Posts