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

NikkiAdair
Excursionist
17 0 7

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!

Replies 60 (60)

KetanKumar
Shopify Partner
36839 3635 11972

@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 Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
NikkiAdair
Excursionist
17 0 7

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. 

KetanKumar
Shopify Partner
36839 3635 11972

@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 Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
NikkiAdair
Excursionist
17 0 7

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

KetanKumar
Shopify Partner
36839 3635 11972

@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 Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
solo11
Tourist
7 0 1

how to do this for mobile only?

NattyIce311
Excursionist
32 0 4

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

KetanKumar
Shopify Partner
36839 3635 11972

@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 Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
NattyIce311
Excursionist
32 0 4

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
36839 3635 11972

@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 Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
NattyIce311
Excursionist
32 0 4

am hoping to only make the slideshow at the top fullpage, not the images below, is there any way to do that?

KetanKumar
Shopify Partner
36839 3635 11972

@NattyIce311 

can you please issues image 

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 Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
NattyIce311
Excursionist
32 0 4

You can go to https://naked-city-clothing.myshopify.com/ and the password is Nakedcity3730

I only want the slideshow image to be full width, not the images below. 

rishabhjain1024
Excursionist
29 0 12

Hello, I'm also facing the same issue.
Any solution?

TheresaS
Tourist
5 0 5

Did you get your question answered. I found a solution. Not sure if it's correct, but it works.

KetanKumar
Shopify Partner
36839 3635 11972

@TheresaS 

thanks for update

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 Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
TheresaS
Tourist
5 0 5

The way I fixed this issue was adding this code to the end of the theme.scss.liquid file:

 

#flexslider--slider .slides__image, #flexslider--slider .slides svg {
height: 100% !important;
}

 

KetanKumar
Shopify Partner
36839 3635 11972

@TheresaS 

great thanks for update

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 Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
rishabhjain1024
Excursionist
29 0 12

@KetanKumar Hello, any solution for this as I tried the above code but faced the same issue where its affecting the rest of the images on my webpage

KetanKumar
Shopify Partner
36839 3635 11972

@rishabhjain1024 

yes, please share store url 

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 Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
rishabhjain1024
Excursionist
29 0 12
KetanKumar
Shopify Partner
36839 3635 11972

@rishabhjain1024 

what's issue?

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 Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
rishabhjain1024
Excursionist
29 0 12

@KetanKumar I have used the following code:
.template-index .main-content { margin-top: 0; max-width: 100%; padding: 0; }
The homepage banner is full width but now whole page is completely widescreen to the edge of the page. I want only the homepage banner to be of full width

rishabhjain1024
Excursionist
29 0 12

@KetanKumar Hello, did You got a chance to check?

TheresaS
Tourist
5 0 5

Are  you trying to accomplish what I have on my website? https://skateitout.com/

If not, just ignore this message.


If yes, the way I fixed this issue was adding this code to the end of the theme.scss.liquid file:

 

#flexslider--slider .slides__image, #flexslider--slider .slides svg {
height: 100% !important;
}

rishabhjain1024
Excursionist
29 0 12

Hello,
Thank You for the reply but I want the banner to be of full width(edge to edge) for mobile view.

KetanKumar
Shopify Partner
36839 3635 11972

@rishabhjain1024 

can you please show me issue ?

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 Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
TheresaS
Tourist
5 0 5

Ok. I get it. So the section you are trying to get edge to edge is inside a wrapper. In order for you to get what you need, you have to move that whole section before the wrapper which limits your width. If you only want that effect on mobile and not on desktop, maybe the Shopify person can help with that part to get the correct code for it. But you can see by my screen capture I attached, I basically moved the section out of the wrapper and it did the job. If this is what you're looking for, then @KetanKumar can get you the correct code and file to edit.  

KetanKumar
Shopify Partner
36839 3635 11972

@TheresaS 

yes, please share store url 

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 Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
TheresaS
Tourist
5 0 5

@KetanKumarmy store is https://skateitout.com/, however, I only moved the section temporarily using web developer tools from my browser to show @rishabhjain1024  what they need to do to fix the issue. The section is showed in the video I attached for them in my last reply. I just don't know Shopify's code well enough to tell him exactly where he needs to re-arrange the section in the editor. I was hoping you can tell him.

KetanKumar
Shopify Partner
36839 3635 11972

@TheresaS 

thanks for all details can you try 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-content {
    max-width: 100%;
    padding: 0;
}

.template-index .main-content .index-section {
    max-width: 1340px;
    margin: 0px auto;
}

.index-section.slideshow-section {
    max-width: 100% !important;
}

 

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 Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
rishabhjain1024
Excursionist
29 0 12

Hello @KetanKumar I have used this code as well but still there's less margin between grid item and edge.
As You can see here, there's proper padding between product image and edge but here the banner is not full width(Edge to edge). This is without the html code shared here.As You can see here, there's proper padding between product image and edge but here the banner is not full width(Edge to edge). This is without the html code shared here.Whereas after applying the html code, banner is now edge to edge but product image is now very close to the edgeWhereas after applying the html code, banner is now edge to edge but product image is now very close to the edge

rishabhjain1024
Excursionist
29 0 12

@TheresaS Thank You for helping on the technical points. Much Apprecicated 🙂

KetanKumar
Shopify Partner
36839 3635 11972

@rishabhjain1024 

thanks code work only top banner full with do you need full page width 100%?

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 Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
rishabhjain1024
Excursionist
29 0 12

@KetanKumar After applying the code full page width is almost 100% .
What @TheresaS have showed in the video is exactly the same required.
Apologies for late reply & Thank You @KetanKumar for constant help 🙂


KetanKumar
Shopify Partner
36839 3635 11972

@rishabhjain1024 

yes, please add that 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 Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
rishabhjain1024
Excursionist
29 0 12

Yes I have added the code but the issue still persits.
Below grid items are also getting effected

KetanKumar
Shopify Partner
36839 3635 11972

@rishabhjain1024 

if possible to give me theme acces so i will check code and update

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 Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
rishabhjain1024
Excursionist
29 0 12

Sure, 
COLLABORATOR REQUEST CODE - 8495

KetanKumar
Shopify Partner
36839 3635 11972

i have send please check

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 Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
rishabhjain1024
Excursionist
29 0 12

Didnt received it yet.

 

 

KetanKumar
Shopify Partner
36839 3635 11972

@rishabhjain1024 

can you please add mention store url again 

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 Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
rishabhjain1024
Excursionist
29 0 12
KetanKumar
Shopify Partner
36839 3635 11972

@rishabhjain1024 

before add can you try this code 

.template-index .main-content .index-section {max-width: 100%;}
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 Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
rishabhjain1024
Excursionist
29 0 12

added but still same

KetanKumar
Shopify Partner
36839 3635 11972

@rishabhjain1024 

i can see that code work 

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 Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
rishabhjain1024
Excursionist
29 0 12

No, just checked again for both mobile view & desktop view.
Can You share screenshot 

KetanKumar
Shopify Partner
36839 3635 11972

@rishabhjain1024 

KetanKumar_0-1649002879819.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 Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
rishabhjain1024
Excursionist
29 0 12

there's side scrolling in desktop view as well as in mobile view.

I have commented out the code for now but side scrolling still there on desktop viewWhatsApp Image 2022-04-05 at 3.53.07 PM.jpeg