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

[ThomasKramer]

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 

[dmwwebartisan]

@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!

[ThomasKramer]

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

[oscprofessional]

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
}
}

[dmwwebartisan · Accepted solution]

@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!