How can I add margin/padding to specific pages on my website?

Store Design
, , ,

Topic summary

A user published a new theme but is experiencing missing padding/margins on most pages, particularly noticeable on mobile devices. They’re unsure where to add CSS code since their theme lacks a traditional “theme.css” file, though it contains “theme.liquid” and “site.css” under assets.

Proposed Solutions:

Multiple support teams offered CSS fixes:

  • PageFly-Victor: Add CSS in theme.liquid before the </body> tag targeting .main-content with 15px padding for screens under 767px. This fixed mobile view but not desktop.
  • EBOOST: Suggested adding code to Assets/site.scss.css targeting .page-width with max-width 1440px and 15px padding.
  • GemPages: Provided code to insert before </body> in theme.liquid.

Current Issue:

The user needs a solution that applies margins to specific pages (blogs, static pages) while excluding the home page, which displays full-width images. The discussion remains ongoing as they seek page-specific targeting rather than site-wide application. EBOOST confirmed their code only applies to static pages and articles, potentially addressing this concern.

Summarized with AI on November 24. AI used: claude-sonnet-4-5-20250929.
1

Hello everyone, I’m hoping someone can help me out. I just published a new theme but on most pages there is no padding/margins on the sides. I’ve attached a screenshot. It looks especially bad on mobile versions.

What code do I need to add and where? If possible, can you give me the code to add if I wanted to change it on the entire website vs individual pages?

Also, I can’t figure out where to add the code. My theme doesn’t have a “theme.css” file. There is a “theme.liquid” under layout and also a “site.css” under assets. So I’m not sure what to edit.

Website: rockstoc.com

Example page with no side margins: https://rockstoc.com/pages/blogs

Thank you in advance!

2

HI @Seann_1

This is Victor from PageFly - Landing Page Builder App

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file theme.liquid

Step 3: paste bellow code in tag → save.

PageFlyVictor_0-1672386757148.png
PageFlyVictor_0-1672386757148.png1365×651 47.6 KB

@media screen and (max-width: 767px){ main.main-content { padding-left: 15px; padding-right: 15px; } }

PageFlyVictor_1-1672386757151.png
PageFlyVictor_1-1672386757151.png199×422 12.6 KB

Hope that my solution works for you.

Best regards,

Victor | PageFly

3

Hi @Seann_1

May I suggest to update code these steps:

  1. Go to Store Online-> theme → edit code
  2. Assets/site.scss.css
  3. Add code below to bottom of file
.page-width > .rte {
	max-width: 1440px;
	margin: 0 auto;
	padding-left: 15px;
	padding-right: 15px;
}
4

Hi @PageFly-Victor , thank you very much for the reply. This solution seems to have worked for the mobile view, however, on my desktop view there is still no margins. Would it have something to do with the max-width or is it another issue? I need a solution that doesn’t affect or has a small affect the home page because it’s full width images.

5

Hello @Seann_1

It’s GemPages support team and glad to support you today.

You can follow these steps:

  1. Go to Online Store → Theme → Edit code
  2. Open your theme.liquid theme file
  3. Paste below code before :

If you require any further information, feel free to contact me.
Best regards,
GemPages Support Team

6

Thank you @EBOOST , I will try this solution. How can I distinguish which pages this applies to? Would it be the first line? I don’t want the margins to apply to the home page, but many of the other pages.

7

If you only want to apply for blog pages, you can try the following code:

If you require any further information, feel free to contact me.
Best regards,
GemPages Support Team

1 Like
8

@GemPages Thank you! This solution works wonderfully on nearly every page, but it completely ruins the home page. So I think I need a solution were I can apply it to specific pages or somehow get it to ignore the home page.

9

Hi @Seann_1

This code only apply to static page and articles.