Change page margins globally

Support
#1

Hi,

Two questions:

  1. What is the best way to change page for every page on my website?
  2. What is the best way to set mobile page margins separately from other resolutions, on every page?

My website is callumbirch.com, and I’d like the page margins cross-site to be quite large, like they are on the home page.

You’ll also see on this page that the current margins don’t work for mobile.

Thanks!

Callum.

#2

Another, related question: is there also a way to change the font size of the opt-in box on the home page, depending on the screen size? It was created in the Thrive Leads wordpress plugin. Thanks…

#3

Hey Callum,

I’m sorry I’m quite confused with your first question. Would you mind clarifying it or giving us more details.

For #2, regretfully, our theme and builders does not have per breakpoint margin setting. Would you mind providing us with screenshots of the desktop and mobile views though so we have a visual idea of the margin problem.

Also provide the links to your other pages so we could compare them to your home page.

For #3, the font size is powered by the Thrive plugin. The plugin might have an option for this. You need to reach out to their product support for instructions and assistance.

Thanks.

#4

Hi Christian,

Sorry for the typo in my first question. It was meant to say:

  1. What is the best way to change the margins on every page of my website?

  2. Ok then. Here’s are screenshots- mobile first, followed by desktop:

The main problem on mobile is that the heading breaks onto multiple lines with the large margin, and the body text is too small. If there’s no breakpoint margin setting, is changing the font sizes for different resolutions an option? Or is there a better way?

Thanks!

P.S. You can see other pages on my website by going to callumbirch.com/blog then using the menu.

#5

Hello CallumPBirch,

Thank you for sending us the URL of your site. I can see the pages and it seems that you created it with Cornerstone. In your section settings, you added a margin of margin: 1em 6em 1em 6em;. This means the the top and bottom has 1em margin and the left/right margins were set up to 6em. The margins will be applied to all screen sizes which is why only have a few space for the contents in smaller screens. If you want to have a wider content area in smaller screens, I would recommend that you edit your page and change the margins of your sections to 0. You will need to set a maximum width for the setting settings if you want to limit the width. In your section settings, find the “Customize” tab and insert an inline css:

$el {
  max-width: 580px;
}

This css will give you 580pixels width for the contents exactly like what you have right now. In smaller screens, you will still have a wider content area though.

Hope this helps. Please let us know how it goes.

#6

Hi,

Thanks.

I added the CSS, but it shifted all of the content to the left-hand side of the page.

Here’s a screenshot:

What’s the best solution to this? NB I want it to look like the previous screenshot on desktop if possible.

Thanks!

Callum.

#7

Hi Callum,

Please change the left and right margin setting to auto, or just change that CSS to this

$el {
  max-width: 580px;
  margin: 0 auto !important;
}

But it’s best to change the left and right margin setting to auto when possible and if available.

Cheers!

#8

Ok I understand. Is there a way to apply this site-wide?

#9

Hey @cpb1g13,

It’s technically possible but it’s a tricky question because it will render the features of our theme and builders unusable or may not work as desired. For example, you won’t be able to use the Page Templates as you’ll be stuck with a 580 max width sections.

IF you wish to proceed, add this CSS in Theme Options > CSS.

.x-section {
  max-width: 580px !important;
  margin: 0 auto !important;
}

Thanks.

#10

Thanks.

Hopefully it won’t be an issue for now because I’m not planning to use page templates, and all of my pages are structured very simply.

I added the code to global CSS, but it only affected the home page.

Any ideas?

#11

Hi @cpb1g13,

I checked and it’s not added anywhere, please make sure it’s added in Theme Options > CSS , then clear the cache before testing.

Thanks!

#12

Hi Rad,

It was added but I hadn’t cleared the cache. It’s working now except for on the blog page and posts. Is it possible to implement it there, too?

#13

Hello Callum,

The given code is only for pages built with Cornerstone. If you want to include the blog index and the single posts, please have the code updated and use this:

.blog .x-container.max.width.offset,
.archive .x-container.max.width.offset,
.single-post .x-container.max.width.offset,
.x-section {
    max-width: 620px !important;
    margin: 0 auto !important;
}

We would love to know if this has worked for you. Thank you.

#14

That works perfectly, thank you very much.

#15

You’re most welcome, Callum.

#16

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.