A Shopify store owner using the Dawn theme wants to constrain their image banner section (containing two side-by-side images) to match the width of other page sections instead of spanning the full browser width on large screens.
Proposed Solutions:
max-width: var(--page-width) and padding adjustments to contain the banner and its two image halves.page-width class: Another suggestion to add this class directly to the banner element or check section settings for a container optionCurrent Status:
The user attempted the custom CSS solution but reported it didn’t work initially. They then tried their own CSS snippet using max-width: 955px which produced some effect, though they’re uncertain if it’s the correct approach. One contributor suggested the CSS may have been added with wrong syntax and recommended placing it at the end of assets/base.css. The issue remains unresolved with ongoing troubleshooting.
Site: https://copezo.com/
How do I make it so that the image banner, the one that has two images at the bottom is shrunk so that it aligns with the category section? (Image below). Because if I do the collage for example, it aligns with everything from both sides, but image banner doesn’t. It goes full website width. It looks a bit odd when you have a large screen and everything is in the middle but you have these massive image banners that goes from edge to edge.
Consider, for example, “Collage” with single image?
Please try to add this custom CSS as below:
@media screen and (min-width: 990px) {
#Banner-template--24633154076962__image_banner_i6dCe6 {
max-width: var(--page-width);
padding: 0 5rem;
margin-inline: auto;
}
#Banner-template--24633154076962__image_banner_i6dCe6 .banner__media-half:first-of-type {
left: 5rem;
width: calc(50% - 5rem);
}
#Banner-template--24633154076962__image_banner_i6dCe6 .banner__media-half:nth-child(even) {
right: 5rem;
width: calc(50% - 5rem);
}
}
The result will be:
@SellingWithAlex Just add .page-width class to banner or check section setting hope there is any option to put this section in a container
If it helped so please mark it solved.
Yeah I thought about it. However I want to use two images. And I know the solution for this would be just to make 2 images into 1 and add it as a collage, but there has to be a ‘proper’ way lol
{
max-width: 955px;
margin: 0 auto;
padding: 0 20px;
}
This… did something, but no idea if this is correct
It will work @SellingWithAlex , but the best way is to check the section setting options.
I think you added wrong syntax. can you try to add to the end of file assets/base.css in code?