Viewing 21 posts - 1 through 21 (of 21 total)
  • Author
    Posts
  • #242701

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

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

    #242931

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

    #242978

    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

    #242996

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

    Thanks for taking a look

    #243008

    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

    #243274

    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

    #244110

    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

    #244393

    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

    #245413

    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

    #245414

    Hi there

    With all the other code snippets you have suggested above?

    Cheers

    #245416

    Hi!

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

    Regards,
    Yigit

    #245418

    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

    #245422

    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

    #245427

    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

    #245432

    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

    #245436

    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

    #245440

    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

    #245447

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

    Many thanks

    #245455

    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

    #245892

    Brilliant, many thanks for your help

Viewing 21 posts - 1 through 21 (of 21 total)
  • The topic ‘Follow on from previous thread about responsive text size in slider’ is closed to new replies.