How to make banner full width for dekstop and mobile in Supply theme?

Solved
NielsSchutte
Explorer
167 2 8

Hi all,

I'm currently creating a webshop and I'm trying to set the width of my banner to fullscreen, like this:

https://www.biceppapa.nl/

 

Hope someone can help me out with some css.

URL: www.smartsnutrition.myshopify.com or http://smartnutrition.nl/

Pass: plazay

Thanks in advance!

0 Likes
NielsSchutte
Explorer
167 2 8

Anyone? Or is this not possible with Supply theme?

0 Likes
Hank
Shopify Staff
Shopify Staff
1094 128 172

Hi, @NielsSchutte,

Hank here from Shopify. Really great question!

This may be done through some coding, but if I'm honest, it would affect the rest of the site in doing so. I would suggest perhaps using a theme that has a full-width option for the slideshow. I will list them below for you to consider and you can compare them to see if they suit your needs!

 

 

 

 

All of those are free themes designed by Shopify that have a wide option for the slide show, with Venture being the closest in style to Supply. Let me know what you think, but you can add all of those to your admin, so you can see what they would look like in your store!

 

All the best, -Hank

Hank | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

0 Likes
NielsSchutte
Explorer
167 2 8
Hi,

Thank you for your reply. Isnt it possible in Supply theme? I already invested alot of time in setting up this theme.. Does not even have to be a slider, a full size image is fine aswel.

Niels
0 Likes
sarhov
Shopify Expert
482 85 151

This is an accepted solution.

It is possible, follow the following steps to make it done.

1. Actions >  Edit Code.

2. Assets> theme.scss.liquid.

3. Scroll at the very bottom of this file and add the following snippet 

 

.template-index .main-content {
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
}

.template-index .main-content .shopify-section:not(.slider-section) {
    max-width: 1060px;
    margin: auto;
    padding-left: 30px;
    padding-right: 30px;
    @media screen and (max-width: 479px){
     padding-left: 15px;
     padding-right: 15px;
   }
}



Author: Hovhannes Sargsyan (aka sarhov)
Email: shopify@sarhov.com
Website: https://sarhov.com
Try Shopify free for 14 days,

NielsSchutte
Explorer
167 2 8

Hi Sarhov,

Thank you for your effort! I've added your code at the bottom of my css file and I've got the following results:


Desktop:

 

Knipsel.PNG

 

Mobile:

Knipsel.PNG

 

As you can see the code works fine for mobile solution but not for desktop version, can you change the code so it works for desktop aswell? Also the top of the banner is not located at the bottom of the navigation, theres still some with space.. Hope u can help!


Many thanks in advance,

Niels!

0 Likes
NielsSchutte
Explorer
167 2 8

No one has a solution for this? Can't find anywhere on Google aswell..

0 Likes
Hank
Shopify Staff
Shopify Staff
1094 128 172

I appreciate that you have done a lot of work on your theme, which is a reason not to change the theme for sure.

As this would not be covered as a part of Shopify's design time our developers would not be able to assist with this, but I do have a suggestion if you cannot locate the answer through searching online and in the forums.

Hopefully, someone with more technical skills in the community will come across this and be able to add some value to you here in terms of your mobile display, but if not, your best bet might be to reach out to one of our Shopify Experts, who you can hire to do almost any custom work on your store. If you were to reach out to them about this query, they would be able to resolve this issue for you.

Hank | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

0 Likes
sarhov
Shopify Expert
482 85 151

I can see that it shows like this, it is not correct ?

dmymKmK[1].jpg

Author: Hovhannes Sargsyan (aka sarhov)
Email: shopify@sarhov.com
Website: https://sarhov.com
Try Shopify free for 14 days,

0 Likes
NielsSchutte
Explorer
167 2 8
Works, yeah! Accepted as solution!