Hello, I want a section “image with text” to be full-width. I’ve seen it on other pages and tried to apply some of the solutions I found in these forums but I haven’t managed to make it work.
Topic summary
Goal: make a Shopify “Image with text” section span full width on the homepage.
-
Store URL shared (careerhabitpro.com). A helper noted there are 4 such sections and targeted only the first one.
-
Proposed fix: add a custom CSS rule in base.css to unset padding for that specific section, with step-by-step instructions to edit theme code. A result screenshot was provided.
-
Outcome: partially successful. The section expands more, but rounded corners remain, and on large monitors it still doesn’t appear truly full width.
-
Scope clarified: remove rounded corners only for this specific section (not globally), and ensure consistent full-width across browsers.
-
Follow-up: helper requested screenshots and browser details; the user provided a screenshot and confirmed the issue occurs in Google Chrome on a large monitor, while it looks fine on a laptop.
Status: unresolved/ongoing. Pending a targeted CSS update to remove rounded corners for the single section and to enforce full-width behavior on large screens and across browsers.
Notes: screenshots are central to understanding the display issues.
Hi @albaq
Could you please provide your Store URL and, if applicable, the Password too? Your cooperation is greatly appreciated!
Best Regards,
Sahil
Hi @albaq
Please share store URL?
Hi, this is the url: careerhabitpro.com
Hi @albaq Thanks for providing the URL.
I have seen that there are 4 Image with Text section that you are using in the home page. Do you want to have full width for all the 4 sections?
I have done it for 1st section in home page. Please add this code in base.css file.
.image-with-text.image-with-text--no-overlap.page-width.isolate.collapse-corners.section-template--19784022851915__e88cff30-04bd-46fa-8f6c-3b0324c7bc07-padding {
padding: unset !important;
}
If you are not sure where is your base.css file please follow the steps:
- Login in shopify admin.
- Click on the Online Store.
- Then click on the button next to Customize in Refresh Theme.
- Click Edit Code.
- Search Base.css in the code in left hand side.
- Add the code given above in the bottom of the file.
Result:
If you need any assistance then please feel free to ask the same.
Hopefully it will help you. If yes then Please hit Like and Mark it as solution!
Best Regards
Sahil
1 Like
Hi, thank you very much!!!
It kind of worked though… This is how it looks now (see pic attached) How
can we get rid of the rounded corner and make sure it’s full width in all
the browsers? Thank you!
[image: Captura de pantalla 2023-10-25 a les 14.08.27.png]
Hi @albaq I am glad to hear that the solution has worked for you.
It will be great if you can hit Like and Mark it as solution!
Do you want to remove the rounded corner for all the images in Image with Text section or just for this section in the homepage?
Best regards
Sahil
Just the one in this section.
Also, this is how it looks in big monitors… how can we make it is full width in all browsers?
Google chrome with the big monitor, I can see it well on my laptop.
Also, how can we get rid of the rounded corners on the picture? Thanks 