How can I achieve full width image and background color on Minimal Theme?

[DRH]

Hi guys,

I'm fairly new to Shopify and just started out using Shopify to help a friend out with his webshop. Now I'm creating a new webshop design on the Minimal Theme and I don't seem to be able to figure out: 

1. how I can get a full width image, and;
2. how I can get a full width background color.

I've been searching through this forum, but no luck yet. My knowledge of both HTML and CSS is basic. But I can't imagine it's something that's so difficult. Hope one of you can help?!  

Thanks! 

[KetanKumar]

@DRH 

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.

[DRH]

Hi Ketan, 

Thanks! Thing is the site isn't live yet. The page that's online now needs to get changed and I'm doing that in the background (read: in the Minimal theme in the library). Is there a way I can share that with you? 

[KetanKumar]

@DRH 

yes, please share store preview url

[DRH]

Hi Ketan,

Here you go! 

https://qw59qpseu6qwq415-60338831568.shopifypreview.com

I would like to have the last image full width and a full width bg color behind "choose from 10+ sports" 

Thanks! 

[ThomasBorowski]

Minimal's main content is contained in a wrapper element so it's not easy to "break out" of that limited width element with an element that is wider than the wrapper.

Here's an article on CSS Tricks that explains some options: https://css-tricks.com/full-width-containers-limited-width-parents/

[DRH]

Thanks Thomas! I will look into this! 

[Touhiid]

Hello @DRH 

Are you trying to do this? covering full width of your device screen?

[DRH]

Hi Touhiid, 

No, only sections of the page. So a singular image or background section. 

[Touhiid]

@DRH like this?

[DRH]

@Touhiid 

Yes like that! 🙂 

But then for the bottom img f.e. Don't know if the header differs from any other image on the page, but I used a custom HTML section to import the bottom image. So I would need a class (?) in order to stretch it to full width. 

Thanks for the help so far! 

[Touhiid]

@DRH Copy and paste the following code to your theme CSS

.wrapper {max-width: max-content! important;}

.shopify-section-featured-collection,
#shopify-section-1640781928459201ff,
#shopify-section-16407778133ad16c61
{
    max-width: 1150px! important;
    margin: auto! important;
}
#shopify-section-16412129602379c1b1 img
{width: 100% !important;}

Did it solve your issue?

- If yes, please Like & Mark As Solution to help the community
- If not, let me know. also share a screenshot of the code that you added.

[Touhiid]

@DRH 

Copy and paste the following code to your theme CSS

.wrapper {max-width: 1900px! important;}

.shopify-section-featured-collection,
#shopify-section-1640781928459201ff,
#shopify-section-16407778133ad16c61
{
    max-width: 1150px! important;
    margin: auto! important;
}
#shopify-section-16412129602379c1b1 img,
#shopify-section-16407802182f3156a0 img
{width: 100% !important;}

Did it solve your issue?

- If yes, please Like & Mark As Solution to help the community
- If not, let me know. also share a screenshot of the code that you added.

[COOKIECREW]

Hello there, trying to use this code but not sure where to enter it as there's no theme css file.

I did try the custom css page option but it wont work there.. Thanks!

[Touhiid]

@DRH 

I am editing this reply as it was posted multiple times. Ignore the first code, please use the second one.

[KetanKumar]

@DRH 

its common code it can be change custom code

[DRH]

@KetanKumar

Jup, that's what I thought as well, but I don't seem to get it working. Do you have an example code for me? Thanks! 

[Touhiid]

Oops! the reply was posted three times!

Sorry for the inconvenience.

initially, I thought it was a network issue, later I realized it was the Shopify filter.

[DRH]

@Touhiid 

Thanks for the code! 

Just to check, this will change the width of top header to full width right? But I'm actually looking to get the bottom image (is custom HTML block) in full width. Would that work with your CSS add-on? 

Thanks again! 

[Touhiid]

@DRH I tested from my end and it was working. Give it a try it should work because I tested it in your store also.

[DRH]

@Touhiid 

Just tested the code, but it set the entire website to full width. All sections and elements. I just want 1 image (the last one) set to full screen.

And I want to use a background color behind the featured collection, also full width. 

@KetanKumar 

You said I could just use a code snippet in the custom HTML to set just 1 image to full screen? How do I do this? 

Thanks again guys! 

[KetanKumar]

@DRH 

yes, please check this