Hi there, I’d like to make the top image with text section on my website full width.
Website: pasdepoison.nl
Ww: thiely
Topic summary
Goal: make the Shopify “image-with-text” section span full width and remove rounded corners.
Key steps and outcomes:
- Full width: Adding CSS to remove default spacing worked. Suggested rules were
.image-with-text { padding: 0; margin: 0; }ormain#MainContent .image-with-text { padding: 0; margin: 0; }, placed in base.css/theme.css. OP confirmed success after pasting into base.css. - Scope concern: OP asked if this would affect other image-with-text sections. No direct answer was provided.
Rounded corners (border radius):
- A follow-up CSS was shared to set
border-radius: 0on content/media within.image-with-text.collapse-corners .... OP initially couldn’t get it to work and asked where to paste it; later noted continued desire to remove all round corners on desktop. Status appears unresolved/unclear.
Alternative approach:
- Another reply proposed a custom “hero-banner” CSS pattern (background-image with centered text). This is an alternative build, not specific to the existing image-with-text section.
New report:
- Another user reported the spacing CSS didn’t work on their store even in base.css. No confirmed resolution yet.
Notes: Code snippets and screenshots are central to this thread. Discussion remains open.
Hi,
Add this CSS code
Online Store > Themes > Edit code > Assets > custom.css or theme.css
.image-with-text { padding: 0; margin: 0; }
Hi @Dtcedrico0m .
Follow These steps.
Go to the online store theme and go to base.css, custom.css or theme.css file paste the code mentiond below.
main#MainContent .image-with-text { padding: 0; margin: 0; }
Like this.
If I managed to help you then, don’t forget to Like it and Mark it as Solution!
Does this affect other image with text sections I will use as well?
I added it to the section itself, it worked, however I’d like to get rid of the round borders
I added the code to the section itself. It worked, however I would like to get rid of the round borders on the bottom part of the section.
Add this code.
.image-with-text.collapse-corners:not(.image-with-text--overlap) .grid:not(.image-with-text__grid--reverse) .image-with-text__content {
border-radius: 0;
}
.image-with-text.collapse-corners:not(.image-with-text--overlap) .grid:not(.image-with-text__grid--reverse) .image-with-text__media {
border-radius:0;
}
If I managed to help you then, don’t forget to Like it and Mark it as Solution!
Padding and Margin did work fyi
Thanks it worked, pasted in base.css, however I’d like the section to have no round corners at all when people view it on desktop. Is that possible?
Hello @Dtcedrico0m ,
You can try to follow these steps:
Go to Online Store → Themes → Actions → Edit code
Go to Assets folder → base.css file or theme.scss.liquid file
Add this following code at the bottom of page
.hero-banner {
position: relative;
width: 100%;
height: 300px;
background-image: url("path/to/your/image.jpg");
background-size: cover;
background-position: center;
}
.hero-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
color: #ffffff;
}
.hero-content h1 {
font-size: 32px;
margin-bottom: 20px;
}
.hero-content p {
font-size: 18px;
margin-bottom: 20px;
}
.cta-button {
display: inline-block;
padding: 12px 24px;
background-color: #ff0000;
color: #ffffff;
text-decoration: none;
font-size: 16px;
}
.cta-button:hover {
background-color: #cc0000;
}
Save changes
Hope this can help. Let us know if you need any further support.
Ali Reviews team.
i have tried to add this code to the section itself and to the base.css didn’t work.
Not sure what I am doing wrong here!
Store: https://monaelshanawanyjewellery.com/
ps: autaws
