Sections Fill Up entire width of screen on desktop?

Solved

Sections Fill Up entire width of screen on desktop?

ambientcandle19
Excursionist
50 0 4

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

Accepted Solution (1)
ThePrimeWeb
Shopify Partner
2139 616 506

This is an accepted solution.

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 "<head>" tag paste the following. Screenshot attached for reference.

<style>
.page-width {
    max-width: 1800px !important;
}
</style>

 

Screenshot is for reference only, the correct code to paste is the one shown above.

ThePrimeWeb_0-1708620471618.jpeg

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

View solution in original post

Replies 8 (8)

ThePrimeWeb
Shopify Partner
2139 616 506

Hey @ambientcandle19,

 

Can you share the link to your store?

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
ambientcandle19
Excursionist
50 0 4

Hey,

 

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?

ThePrimeWeb
Shopify Partner
2139 616 506

This is an accepted solution.

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 "<head>" tag paste the following. Screenshot attached for reference.

<style>
.page-width {
    max-width: 1800px !important;
}
</style>

 

Screenshot is for reference only, the correct code to paste is the one shown above.

ThePrimeWeb_0-1708620471618.jpeg

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
ambientcandle19
Excursionist
50 0 4

That was perfect! Literally the best. Have the best day

ambientcandle19
Excursionist
50 0 4

@ThePrimeWeb wrote:

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 "<head>" tag paste the following. Screenshot attached for reference.

 

<style>
.page-width {
    max-width: 1800px !important;
}
</style>

 

 

Screenshot is for reference only, the correct code to paste is the one shown above.

ThePrimeWeb_0-1708620471618.jpeg

 


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

IMG_20240222_183215.jpg

 

 

ambientcandle19
Excursionist
50 0 4

Also the titles are around 5-6 times larger than the other titles...

ThePrimeWeb
Shopify Partner
2139 616 506

Hey, 

 

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. 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
ambientcandle19
Excursionist
50 0 4
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.