How can I adjust the page margins in LayoutHub?

Store Design
,

Topic summary

A user is experiencing unwanted large side margins on their LayoutHub page and cannot locate the setting to adjust them. They’ve shared their page URL and screenshots showing the issue.

Proposed Solutions:

  • Two community members suggested adding CSS code to remove the padding
  • The code targets .wrapper.main-content.page-main--wrapper with padding-left: 0px; padding-right: 0px;
  • One solution includes a media query for screens with min-width 480px

Current Status:

  • The original poster tried implementing the suggested CSS but reports it’s not working
  • A helper is now troubleshooting by asking which CSS file the code was added to (base.css, custom.css, or theme.css)
  • They’ve requested a screenshot of the inserted code to diagnose why it’s not taking effect
  • The issue remains unresolved and troubleshooting is ongoing
Summarized with AI on November 17. AI used: claude-sonnet-4-5-20250929.
1

Hello.

Im working on a new page design on Layout-hub, but now my site is display with this big margins on the sides and I cant find where to change that parameter. help! the page link is : https://palletcoffeeroasters.com/pages/pallet-plus

Screenshot-2023-08-25-at-22.36.15.jpg
Screenshot-2023-08-25-at-22.36.15.jpg1000Ă—589 39.8 KB

Screenshot-2023-08-25-at-22.36.24.jpg
Screenshot-2023-08-25-at-22.36.24.jpg1000Ă—565 59.4 KB

1 Like
2

Hi. The below code will fix your problem.

  1. Go to Online Store > Themes > Edit Code

  2. Search for base.css or custom.css.

  3. Add below code to the end of the page.

@media screen and (min-width: 480px){
.wrapper.main-content.page-main--wrapper {
    padding: 30px 0 !important;
}
}
3

Hi @manuperezb

Try this one.

  • From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  • Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  • In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
.wrapper.main-content.page-main--wrapper {
    padding-left: 0px;
    padding-right: 0px;
}
  • And Save.

i hope it help.

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

4

I follow the steps but i looks the same.. :disappointed_face:

5

There is a little mistake in the code. Try this code.

@media screen and (min-width: 480px){
.wrapper.main-content.page-main--wrapper {
    padding: 30px 0 !important;
}
}
6

Nope nothing yet :disappointed_face:

7

In which file you are putting the CSS code? It is not inserted right. If you don’t have any base.css or theme.css file. Put the code in the custom.css file. Please share picture of the code that you have entered.