How can I make the homepage banner full screen width on mobile?

Store Design
1

Hi all,

We are trying to make the banner element on our homepage full screen width for mobilee only.

We are using the Expression theme.

Can someone help?

link: springblossom.de

1 Like
2

@ThomasKramer

Please Go to Online Store->Theme->Edit code then go to assets/styles.css ->paste below code at the bottom of the file.

@media only screen and (max-width: 560px){
.main-page-content {
    padding-right: 0px !important;
    padding-left: 0px !important;
    overflow: hidden;
}
}

Thanks!

1 Like
3

@dmwwebartisan Thanks for your prompt help. I added the code, but this did not change anything…

1 Like
4

hello @ThomasKramer

You can try this code
Just go to online store → action ->theme->edit code-> asset->style.css

paste the code in this file

@media screen and (max-width:767px){
#shopify-section-banner .container {
    padding-left: 0;
    padding-right: 0;
}
#shopify-section-banner .container slick-track,#shopify-section-banner .container slide{
width:100% !important
}
}
1 Like
5

@ThomasKramer

Please Go to Online Store->Theme->Edit code then go to assets/styles.css ->paste below code at the bottom of the file.

@media screen and (max-width:767px){
#shopify-section-banner .container {
    padding-left: 0;
    padding-right: 0;
}
#shopify-section-banner .container slick-track,#shopify-section-banner .container slide{
width:100% !important
}
}

Thanks!

1 Like