Issue: On the Craft theme, desktop sections (e.g., multi‑column, featured items) don’t span full width; there are large side margins. The goal is to make sections fill the entire screen.
What happened: A helper asked for the store URL to target the correct elements. The merchant declined to share but tried a suggested theme.liquid change (code pasted under the tag). That made the homepage look correct (full width) and was initially “perfect.”
New problems: The same change made “regular pages” too wide and some titles much larger than others. The merchant also wants different imagery/layout by device: mobile images flush to the edges and desktop using “image with text.” As a workaround, switching “image with text” to “banner” produced the desired flush look on mobile, but they want that behavior only on mobile.
Constraints: The helper reiterated they need the live site to provide precise CSS/section targeting. Code details are not visible in the thread; screenshots/attachments are referenced and central.
Status: Unresolved/ongoing. Open items: scope full‑width to specific pages (e.g., homepage), normalize title sizes, and implement responsive behavior (banner on mobile, image-with-text on desktop).
I am on the craft theme and the sections don’t go all the way to the end. Does that make sense. It looks good on mobile but on the desktop the sections stop and there is around 1-2 inch margin on both sides. Is there a way to get rid of that so that it is a little larger and fills out the entire screen?
The multi columns section and the featured items sections to be specific
I’m not even close to done with the store. Honestly, I wouldn’t feel comfortable sharing it as it looks right now; All I can say is it seems to be the padding around all the content in the page. Like mine seems to be a good 2 inches where the other bigger websites like have 1/2 an inch if that makes sense. If not when the store looks better I can come back on but id really appreciate any help you could give. So sorry not trying to be cryptic but it looks bad. It isnt just the sections I think its just the whole page. Some thing that coding could fix?
I know what you’re saying, but I need to see the store to check what elements in the page’s code to write code for. So without the site, I’m pretty much blind.
From experience with other stores, I can suggest this, you can try and see if it works, if not just reverse it.
Go to your theme’s “Edit Code” Option, then in the search bar type “theme.liquid”
Below the tag “” tag paste the following. Screenshot attached for reference.
Screenshot is for reference only, the correct code to paste is the one shown above.
Hey the code works great but it made the regular pages too wide. The home page beautiful the regular pages I have made are too wide. Is there a bit of code I didn’t add? Also just throwing this out there is there a way to make the mobile image different from the desktop for an image with text. I’ll attach an image see the grey box is there a way to make my mobile images flush to the sides like that
Like I said, there’s no way for me to see if any of this is feasible without visiting the store page. Please try to understand that the equivalent of what you’re asking is to modify a car without the car.
No I completely understand I just had a real bad experience. Which is why
I’m trying to do it all myself now as much as possible. It not a super
mystery or anything. If anything just let it be its no big deal I just want
it to look a certain way.
Essentially I have the craft theme. And my page looks like the first image.
I was able to get it to look like the second by change it from “image with
text” to “banner”. And that gave me the desired look on mobile. Flush to
the edges. But I want it to only look like the second image on mobile and
look like an image with text on the desktop. A lot of the other sites have
that and I just want the continuity. With other brands. Is that feasible.