Re: How do I make larger margins on my whole website? (disabling Full-Width)

Ruef · ‎05-02-2024

Hello!

I'm trying to pad the sides of my whole website on desktop and bring my content to the center of the page. My website is currently full-width. I'm using the theme 'Shapes' & my website is here - https://theprizecounter.com/

I love the look of the website when I'm editing (the large margins on the sides) but not so much when I visit outside the editing.

(This width is preferred for desktop viewing, not mobile.)

BSSCommerce-HDL · ‎05-05-2024

Hi @Ruef

Please modify the previous code to this and let me know if it fixes the issue

<style>
  @media (min-width: 990px) {
    body { 
       margin: 0 auto !important;
       max-width: 80% !important;  
    }
  }
</style>

If our suggestions are useful, please let us know by giving it a like, marking it as a solution, or donating here ☕.

B2B Solution & Custom Pricing | Product Labels by BSS

Need help from our expert? Kindly share your request with us via community@bsscommerce.com

BSS Commerce - Full-service eCommerce Agency

View solution in original post

Dan-From-Ryviu · ‎05-02-2024

Hi @Ruef

You can add this code to the theme.liquid file, after <head> to do it.

<style>
@media (min-width: 990px) {
.px-section { 
padding-left: 5rem !important;
padding-right: 5rem !important;
}
}
</style>

- Helpful? Like and Accept solution! ‌Support me: Buy coffee
- Ryviu - Reviews & QA app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

Ruef · ‎05-02-2024

Hello, unfortunately this didn't change anything

BSSCommerce-HDL · ‎05-04-2024

Hi @Ruef

Please follow the instructions below

Step 1: Shopify Admin -> Online Store -> Edit Code:

Step 2: Choose file theme.liquid and add this code to below <head>:

<style>
  @media (min-width: 990px) {
    body { 
       margin: 0 auto;
       max-width: 80% !important;  
    }
  }
</style>

Here is the result:

Hope this can help you.
Kind regards

If our suggestions are useful, please let us know by giving it a like, marking it as a solution, or donating here ☕.

B2B Solution & Custom Pricing | Product Labels by BSS

Need help from our expert? Kindly share your request with us via community@bsscommerce.com

BSS Commerce - Full-service eCommerce Agency

Ruef · ‎05-04-2024

Hello! This helped but now everything is aligned to the left.

BSSCommerce-HDL · ‎05-05-2024

Hi @Ruef

Please modify the previous code to this and let me know if it fixes the issue

<style>
  @media (min-width: 990px) {
    body { 
       margin: 0 auto !important;
       max-width: 80% !important;  
    }
  }
</style>

If our suggestions are useful, please let us know by giving it a like, marking it as a solution, or donating here ☕.

B2B Solution & Custom Pricing | Product Labels by BSS

Need help from our expert? Kindly share your request with us via community@bsscommerce.com

BSS Commerce - Full-service eCommerce Agency

Ruef · ‎07-31-2024

Thank you! 😄

This worked great!

Re: How do I make larger margins on my whole website? (disabling Full-Width)

How do I make larger margins on my whole website? (disabling Full-Width)

Community Blog Articles