How can I make my slideshow for my mobile site wider? - Dawn

Store Design
1

Hi,

I need help making the slideshow on Dawn wider for my mobile site. For the desktop it is perfect but annoyingly not for the mobile as its too short.

i want the slideshow to be similar to the example i’ve attached, and i don’t mind if the sides are cut off just like the example.

Also, I want the button to be in a similar position as the example, for both desktop and mobile

my website (it’s a WIP so if the link expires please let me know): https://dsv1yct985xxxmdm-26959347735.shopifypreview.com

example site: colebuxton.com

Thank you

Screenshot 2022-03-26 at 21.40.49.jpg
Screenshot 2022-03-26 at 21.40.49.jpg833×1559 124 KB

Screenshot 2022-03-26 at 21.41.03.jpg
Screenshot 2022-03-26 at 21.41.03.jpg834×1560 102 KB

2

Hi,

Please ignore the Shop Now button requirement, I’ve just removed the button

However, I still need the slideshow to be bigger.

Thanks

3

Hi @BYS ,

You can follow the instruction below:

  1. Go to Online Store->Theme->Edit code
  2. Asset->/base.css->paste below code at the bottom of the file:
@media (max-width: 749px) {
     #shopify-section-template--14562346532887__164792411094cd10f4 .slideshow__media:before {
        padding-bottom: 177% !important;
     }
}

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.

4

Hi @AvadaCommerce ,

Unfortunately it didn’t work.

On base.css I did this instead and got my desired effect:

.grid–1-col .grid__item {
max-width: 200%;
width: 200%;

However, it effects the desktop which I don’t want it to, and it isn’t centred

Thanks

Screenshot 2022-03-27 at 03.08.40.png
Screenshot 2022-03-27 at 03.08.40.png836×1556 236 KB

5

Hi @BYS ,

You can try replace previous code by below code:

@media (max-width: 749px) {
     #Slider-template--14562346532887__164792411094cd10f4::before, #Slider-template--14562346532887__164792411094cd10f4 .media::before, #Slider-template--14562346532887__164792411094cd10f4:not(.banner--mobile-bottom) .banner__content::before {
        padding-bottom: 177% !important;
     }
}

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.

6

Hi @AvadaCommerce ,

Thank you so much, you have solved a big problem of mine!

I’m very excited to launch my new website on Monday, you’re the best!