Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
  • #572463

    Have a Fullwidth Easy Slider on Home Page, but wanted more room for the large header and caption, so I used CSS to change the Width as follows:
    .slideshow_caption { width: 65%; }

    But here’s the problem, on certain monitors, and my phone, the bottom of the slide is now cut off – I must have stretched out the content, but the slide is not responding? can you help me


    Hi Eleina_Shinn!

    Add this to set it back to 100% width on smaller screens.

    @media screen and (max-width: 767px) {
    .slideshow_caption { width: 100% !important; }



    Darn, it didn’t work… I love this slider and want to use it so much… any other suggestions?



    Can you please change your code to following one

    @media only screen and (min-width: 768px) {
    .slideshow_caption { width: 65%; }}

    Best regards,


    yep, no cigar :(



    Do you mind creating a temporary admin login and posting it here privately?



    Of course not, your help is so appreciated!

    Oh, and I tested the site on Screenfly… the slider gets cut off on all kinds of screens.

    It looks like my css code to make the caption area wider/bigger only takes effect on some screen sizes, so my css must be bad, not at the root, so not responsive, because on all kinds of screens (except mine, looks beautiful on mine) – you can see on other screens that the caption area is still a much smaller width (the original 45%), so caption area is longer (more height) than size of slide, if that makes sense, and it’s all cut off, you’ll see.

    and thank you for looking in to this :)



    We are working on your ticket please wait while we update the results here soon.

    Since there is not enough room in the small screen the slider text is hidden in small screen you can enable it by deleting

    ” .slideshow_align_caption p { display: none !important; } ”

    in the code below and please feel free to adjust the font size as required for different screen size.

    /* Custom Slider fonts*/
    @media only screen and (max-width: 1300px) {
        .slideshow_align_caption h2  { font-size   : 32px!important;  }
        .slideshow_align_caption p   { font-size   : 18px!important;  }
        .slideshow_caption           {  width      : 75%!important;   }
    @media only screen and (max-width: 768px) {
        .slideshow_align_caption h2  { font-size   : 24px!important;  }
        .slideshow_align_caption p   { font-size   : 14px!important;  }
        .slideshow_caption           {  width      : 75%!important;   }
    @media only screen and (max-width: 968px) {
        .slideshow_align_caption h2  { display: none !important;  }
        .slideshow_align_caption p   { display: none !important;  }
        .slideshow_caption           {  width      : 75%!important;   }
    .avia-slideshow-inner {
         min-height: 410px!important;
         min-width: 100%!important;     
         overflow: hidden;
    .av_slideshow_full.avia-slideshow img,
    .avia-slideshow-inner img{
         min-height: 410px!important;
         min-width: 960px!important;     

    Best regards,

    • This reply was modified 8 years, 1 month ago by Vinay.
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.