How to make the homepage image banner full width for desktop and mobile in Minimal theme?

NikkiAdair
Excursionist
12 0 6

Hi There, 

I've been searching for a way to make my one image slideshow banner (doesn't rotate, just static image), show as full screen on my homepage. I've found code for other themes, but none for Minimal. 

 

I tried using the below code in my theme.sccs.liquid but it actually made my whole page more narrow. Would love it if someone knew how to solve this without me having to change themes.

My website is: https://www.giclee-studios.com/   

 

This is the code I tried:

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

 Thanks!

0 Likes
KetanKumar
Shopify Partner
18896 1984 6992

@NikkiAdair 

sorry for this issue, yes please add this code

.template-index .main-content {max-width: 100%;padding: 0;}
If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
NikkiAdair
Excursionist
12 0 6

Thanks Kumar, unfortunately, it is still not working. I adjusted the code to the below from your reply. but it broke the page.  

 

.template-index .main-content {max-width: 100%;padding: 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;
}

}

-------------

 

If I just use the code you gave me (below), it makes my whole page completely widescreen to the edge of the page, which isn't what I want, I only want the slideshow header image to be completely wide

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

 

I'd like the main image (below) width to be increased to go to the edge of the screen (where the red outlines are) and then the rest of my page and images stay the same (not be widened). 

This main image should be wide to where the red isThis main image should be wide to where the red is

this section below should stay the same (not be wide)this section below should stay the same (not be wide)

 

This is an example:

This is an exampleThis is an example

 

Thankyou, I hope that makes sense. 

0 Likes
KetanKumar
Shopify Partner
18896 1984 6992

@NikkiAdair 

it your common code whole page try again see view after code

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

KetanKumar_0-1620882697853.png

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
NikkiAdair
Excursionist
12 0 6

Hi Kumar, I understand the code works to widen the image - the header image looks great. The problem is I don't want it affecting the rest of the images on my webpage, now they are wide too which is incorrect. Have a look at the videos attached and please let me know how to apply this just to the main header image and not to the rest of the images on the page.

https://www.dropbox.com/sh/zrckudyju1yx0pg/AAAeJ41ZrjLWHUBUbPqbkL0Pa?dl=0 

 wide screen image - ORIGINAL.JPGwide screen image - WRONG.JPG

0 Likes
KetanKumar
Shopify Partner
18896 1984 6992

@NikkiAdair 

your store was common html code change code home need to required to backend code

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
NattyIce311
Excursionist
15 0 3

Were you ever able to figure this out? I'm having the same issue.

KetanKumar
Shopify Partner
18896 1984 6992

@NattyIce311 

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

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

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

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
NattyIce311
Excursionist
15 0 3

I need it to do the exact thing the other person was asking for and it doesn't look like their question was fully resolved. I only want the main page slideshow images to be full width, the other images need to stay how they are. 

my site is https://naked-city-clothing.myshopify.com/ and the password is Nakedcity3730

KetanKumar
Shopify Partner
18896 1984 6992

@NattyIce311 

Thanks for update 

please add this code

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.

.template-index main.wrapper.main-content {
    max-width: 100%;
    padding: 0;
    overflow-x: hidden;
}

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes