Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • June 28, 2022 at 10:18 am #1356692
    fkm

    Hi Enfold team,

    I´m using the Easy Slider on many pages of my website and I would like to enlarge it to the full width on mobile devices (tablets, smartphones).
    Please see screenshots and if possible, please let me know how to do.

    Thank you very much in advance.

    Best regards,
    fkm

    June 28, 2022 at 1:12 pm #1356716
    Guenni007

    the easy slider is inside a color-section ? inside a column ? etc. that is important to know.

    June 28, 2022 at 3:32 pm #1356738
    fkm

    Hi Guenni007,

    thank you very much for your participation.

    Easy slider inside a color-section, yes.
    Not in a columne, just inside a color-section (images no scaling: Original X Original and fading effect).

    Hope that´s enough information.

    Thank you.

    Best regards,
    fkm

    June 28, 2022 at 4:06 pm #1356749
    Yigit

    Hey fkm,

    Thanks for contacting us!

    Please edit your Color Section element and give it a custom ID (“section-container-width” in example below) in Advanced > Developer Settings tab and then add following code to bottom of Quick CSS field in Enfold theme options > General Styling tab

    @media only screen and (max-width: 767px) { 
#section-container-width .container {
  width: 100% !important;
  min-width: 100%;
  padding: 0;
  margin: 0;
}}

    Regards,
    Yigit

    June 29, 2022 at 7:22 am #1356798
    Guenni007

    yes – Yigits Code works – and in addition if you want to get rid of the padding on top and bottom use the following –
    but i would advise to use a custom class, because you can have several easy sliders on one page.
    ( so instead of #section-container-width we have then: .section-container-width)

    @media only screen and (max-width: 767px) { 
  .section-container-width .container {
  width: 100% !important;
  min-width: 100%;
  padding: 0;
  margin: 0;
}

.section-container-width .container .content {
  padding: 0 !important
}
}

    However, if you mean only mobile devices, i.e. mobile phones or tablets that may well have larger screen sizes, use this option instead:

    .avia_mobile .section-container-width .container {
  width: 100% !important;
  min-width: 100%;
  padding: 0;
  margin: 0;
}

.avia_mobile .section-container-width .container .content {
  padding: 0 !important
}
    June 29, 2022 at 9:49 am #1356807
    Rikard

    Hi,

    Thanks for helping out @guenni007 :-)

    Best regards,
    Rikard

    July 5, 2022 at 12:12 pm #1357269
    fkm

    Hi, everyone,

    thank you very much for your replies (and please excuse my delayed one).

    I´m currently using the following CSS to get 16 px spacing on the sides of my website on mobile devices (please see screenshot 1):

    @media only screen and (max-width: 767px) {
    .responsive #top #wrap_all .container {
    width: 100%;
    max-width: 100%;
    padding-left: 16px!important;
    padding-right: 16px!important;
    }
    }

    If I replace this CSS with any of the CSS above (both from Yigit and Guenni007), each of them works fine but also causes the entire content of the color section to be flush with the edges of the page and the header to be indented.
    Please see screenshot 2.

    So I’m wondering if there would also be an simple way to only enlarge all of the easy sliders I´m using for the website and leave the other elements untouched?
    The pages with easy sliders are all structured in the same way (using color-sections): please see backend example screenshot 3.

    It would be great if the easy sliders were flush with the edges on phones (screenshot 4), with 16 pixel paddings on tablets (screenshot 5), and slightly extended on large screens (screenshots 6-7).

    Please let me know if and how this could be done.

    Thanks a lot in advance.

    Best regards,
    fkm

    July 6, 2022 at 5:49 am #1357349
    Nikko

    Hi fkm,

    Can you try using this CSS code and see if it helps:

    @media only screen and (max-width:767px) {
  #section-container-width .avia-slideshow {
    width: calc(100% + 32px);
    margin-left: -16px;
  }
}

    Best regards,
    Nikko

    July 7, 2022 at 11:40 am #1357509
    fkm

    Hi Nikko,

    thank you very much for your reply and the CSS code – it does help, it works great!

    I removed the ID as well as the screensize conditions and so it now affects every Easy Slider on my website:
    flush on smartphones and 16 Px enlarged on each side on big screens (as requested – according to the screenshots 4 and 7).

    .avia-slideshow {
    width: calc(100% + 32px);
    margin-left: -16px;
    }

    Is there another CSS code that will make the easy sliders on tablets 100% wide with 16 px spacing on both sides as shown in screenshot 5?

    Thanks a lot for another reply.

    Best regards,
    fkm

    July 7, 2022 at 12:52 pm #1357525
    Nikko

    Hi fkm,

    You’re welcome. :)
    You can target a larger screen by replacing the max-width value in the code from 767px to 1180px.
    Hope this helps.

    Best regards,
    Nikko

    July 7, 2022 at 3:46 pm #1357557
    fkm

    Hi Nikko,

    thank you very much for your immediate reply.

    I tried around and at some point it worked.
    But then I realized that I liked it better before and so I undid it.
    I´ll leave it the way it is now and I’m absolutely happy with it.

    Please fell free to close the topic as sucsefully completed.

    Best regards,
    fkm

    July 7, 2022 at 4:15 pm #1357569
    Nikko

    Hi fkm,

    We are glad that we are able to help you :)
    Thanks for using Enfold and have a great day!

    Best regards,
    Nikko

  • Author
    Posts
Viewing 12 posts - 1 through 12 (of 12 total)
  • The topic ‘Enlarge Easy Slider to full width on mobile devices’ is closed to new replies.