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

Solved

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

ThomasKramer
Visitor
2 0 2

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 

Accepted Solution (1)
dmwwebartisan
Shopify Partner
12321 2552 3729

This is an 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!

 

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app

View solution in original post

Replies 4 (4)

dmwwebartisan
Shopify Partner
12321 2552 3729

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

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
ThomasKramer
Visitor
2 0 2

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

 

oscprofessional
Shopify Partner
16115 2409 3123

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
}
}
Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing | Oscp Upsell & Cross sell App : Free | Oscp Sales & Volume Discount App : Free | Custom Pricing Wholesale App : Free
dmwwebartisan
Shopify Partner
12321 2552 3729

This is an 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!

 

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app