Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • July 12, 2022 at 2:34 am #1358008
    bemodesign

    Please help me with the CSS code for adjusting Fullwidth Easy Slider image and text ON MOBILE.

    I have added this 3 part code. But the #3 code for “ADJUSTING THE IMAGE ZOOM PERCENTAGE:” messes up my view on desktop.
    How can I fix the #3 part so that it doesn’t affect my desktop view? Or any updates to any of this code would be appreciated. Thanks

    1. ADJUSTING THE FONT SIZE:
    @media only screen and (max-width: 768px) {
    .slideshow_caption { padding: 20px; }}
    @media only screen and (max-width: 480px) {
    .responsive #top .slideshow_caption h2 {
    font-size: 14px !important;
    }}

    2. ADJUSTING THE IMAGE HEIGHT:
    @media only screen and (max-width: 768px) {
    .avia-slideshow-inner, .avia-slideshow-inner img {
    height: 420px !important;
    }
    }

    3. ADJUSTING THE IMAGE ZOOM PERCENTAGE:
    @media only screen and (max-width: 768px) {
    .av_slideshow_full li img {
    width: 180% !important;
    max-width: 180% !important;
    margin-left: -45%;
    }

    July 12, 2022 at 7:20 am #1358029
    Ismael

    Hey bemodesign,

    Thank you for the inquiry.

    There is a missing closing curly brace in the third css media query, which is probably why it affects the desktop view or why it is not working correctly. You can also combine the css rules inside a single css media query and remove the duplicates.

    Please replace the above css with the following code.

    @media only screen and (max-width: 768px) {
  .responsive #top .avia-slideshow-inner, .responsive #top .avia-slideshow-inner img {
    height: 420px !important;
  }

  .responsive #top .slideshow_caption {
    padding: 20px;
  }
}

@media only screen and (max-width: 767px) {
  .responsive #top .av_slideshow_full li img {
    width: 180% !important;
    max-width: 180% !important;
    margin-left: -45%;
  }
}

@media only screen and (max-width: 480px) {
  .responsive #top .slideshow_caption h2 {
    font-size: 14px !important;
  }
}

    Best regards,
    Ismael

    July 12, 2022 at 9:46 pm #1358128
    bemodesign

    Finally! Thank you!

    July 13, 2022 at 5:42 am #1358150
    Ismael

    Hi,

    No problem. Glad to know that the changes above are working properly. Please feel free to open another thread if you have more questions about the theme.

    Have a nice day.

    Best regards,
    Ismael

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)
  • The topic ‘Fullwidth Easy Slider on mobile’ is closed to new replies.