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:
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!
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.
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/
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?
Thanks Thomas! I will look into this!
yes, please share store preview url
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!
Hi Touhiid,
No, only sections of the page. So a singular image or background section.
@DRH like this?
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!
@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?
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?
I am editing this reply as it was posted multiple times. Ignore the first code, please use the second one.
its common code it can be change custom code
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!
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.
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!
@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.