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

Store Design
, , ,
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.