Reducing slideshow to page-width (Dawn Theme's Homepage)

Store Design
1

Hi,

Does anyone know how to make the slideshow in Dawn Theme’s Homepage from full-width to page-width?

Will really appreciate your help, thanks!

1 Like
2

Hi @firstprinciple ,

Please share your store URL and if your store is password protected then please provide password too.

So that we can help you.

Thank you.

3

@firstprinciple

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community! :blush:
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

4

@AvadaCommerce @KetanKumar thanks for your prompt reply!

Plesae find the website url here and the password is vohegh.

5

Hi @firstprinciple ,

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:
#shopify-section-template--15779162718430__164717256882173690 .slider-mobile-gutter {
    padding: 0 1.5rem;
}
@media (min-width: 990px) {
#shopify-section-template--15779162718430__164717256882173690 .slider-mobile-gutter {
    max-width: var(--page-width);
    padding: 0 5rem;
    margin: 0 auto;
}
}

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

1 Like
6

Thanks a lot @AvadaCommerce !

Is it possible for the mobile webpage to still have full-width slideshow?

https://ibb.co/7K0MsQm

7

Hi @firstprinciple ,

You can remove below code css:

#shopify-section-template--15779162718430__164717256882173690 .slider-mobile-gutter {
    padding: 0 1.5rem;
}

Just keep:

@media (min-width: 990px) {
#shopify-section-template--15779162718430__164717256882173690 .slider-mobile-gutter {
    max-width: var(--page-width);
    padding: 0 5rem;
    margin: 0 auto;
}
}

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

1 Like