Viewing 16 posts - 1 through 16 (of 16 total)
  • Author
    Posts
  • #487155

    Hi there,

    We are having an issue with the responsiveness of the slider. The text doesn’t display correctly on phones. Could you have a look for me? Thank you.

    Cyan

    #487244

    Hey Cyandistribution,

    Could you please provide us with a temporary admin login so that we can take a closer look? You can post the details in the Private Content section of your reply.

    Best regards,
    Rikard

    #487821

    Hi,

    Thanks,

    details in private content.

    #488114

    Hey!

    You can set a minimum height to the slideshow when viewed on mobile devices. Add this in the Quick CSS field:

    @media only screen and (min-width: 768px) {
    .av_slideshow_full.avia-slideshow, .avia-slideshow-inner, .avia-slideshow-inner li, .avia-slideshow-inner li img {
        min-height: 300px !important;
    }}

    Remove browser or hard refresh the page.

    Cheers!
    Ismael

    #488774

    Hi,

    Sorry but this doesn’t seem to have worked properly. The code seems to make the slider bigger in standard view and not change it at all on phones. The text is still obscured on phones. We have tested this across multiple devices.

    Regards,
    Connor

    #489330

    Hey!

    Try this code instead:

    @media only screen and (min-width: 768px) {
    div#full_slider_1 {
    min-height: 300px !important;
    }
    .avia-slideshow li img {
    min-height: 300px;
    }}
    

    Regards,
    Andy

    #489340

    Hi Andy,

    It is still the same as before. I have added some screen shots to demonstrate:

    http://www.singlerapid.co.uk/wp-content/uploads/2015/08/sr1.jpg

    http://www.singlerapid.co.uk/wp-content/uploads/2015/08/sr2.jpg

    The text is being cut off completely.

    Regards,
    Cyan

    #489343

    Hey!

    did you clear browser cache and hard refresh a few times? Are you using any caching (plugin)?

    Cheers!
    Andy

    #489345

    Hi,

    I did clear the cache and hard refresh on more than one device as well. We are not using a plugin for caching.

    Regards,
    Cyan

    #489352

    sorry, there was a little typo in the code. I already changed it in your Quick CSS, please review your slider now.

    @media only screen and (max-width: 768px) {
    div#full_slider_1 {
    min-height: 300px !important;
    }
    .avia-slideshow li img {
    min-height: 300px;
    }}
    

    Regards,
    Andy

    #490664

    Hi Andy,

    Almost there now! It looks great except when viewed on a phone in landscape (see pictures below) It seems far too long on this version and you have too scroll really far to actually get to the website.

    http://www.singlerapid.co.uk/wp-content/uploads/2015/08/sr3.jpg
    http://www.singlerapid.co.uk/wp-content/uploads/2015/08/sr4.jpg

    Regards,
    Cyan

    #490733

    Hey!

    adjust my code for landscape mode, to something like this:

    @media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (orientation: landscape) {
    div#full_slider_1 {
    min-height: 300px !important;
    }
    .avia-slideshow li img {
    min-height: 300px;
    }}
    

    Best regards,
    Andy

    #490739

    Hi Andy,

    Back at square one again now it seems.

    http://www.singlerapid.co.uk/wp-content/uploads/2015/08/sr5.jpg

    #490741

    Hi!

    hm what do you mean? did you replace my last code with the first one? don’t replace it, instead use both codes. If it does not work use the code for landscape and this one (for portrait) as well:

    @media only screen 
      and (min-device-width: 414px) 
      and (max-device-width: 736px) 
      and (orientation: portrait) { 
    div#full_slider_1 {
    min-height: 300px !important;
    }
    .avia-slideshow li img {
    min-height: 300px;
    }}
    

    Regards,
    Andy

    #490832

    Hi Andy,

    So close to this being resolved now!

    Hopefully this will be it, however the code has worked on the landscape version the portrait version is cutting text off again. I tried making it longer by adjusting the code you gave me but that only messed up the landscape version again. I have included more screenshots.

    http://www.singlerapid.co.uk/wp-content/uploads/2015/08/sr6.jpg
    http://www.singlerapid.co.uk/wp-content/uploads/2015/08/sr7.jpg
    http://www.singlerapid.co.uk/wp-content/uploads/2015/08/sr8.jpg

    Thanks for all your help!

    Regards,
    Cyan

    #490924

    Hi!

    I removed the landscape code cause it’s not necessary and implemented this code into your Quick CSS field instead:

    @media only screen and (max-width: 768px) {
    div#full_slider_1 {
    min-height: 300px !important;
    }
    .avia-slideshow li img {
    min-height: 300px;
    }
    .caption_bottom .slideshow_caption .slideshow_inner_caption .slideshow_align_caption {
    padding: 0px 0px;
    }}
    

    Please review your website now.

    Cheers!
    Andy

Viewing 16 posts - 1 through 16 (of 16 total)
  • You must be logged in to reply to this topic.