Add margin to full width template?

Hi. I am trying to achieve a look like this on my site:

However on my site it looks like this:

What CSS code do I need to add to give the Full width template a greater margin and center all its content in the middle?

Very much appreciated!
Florian

Hello Florian,

First thanks for using our theme!

Here’s the CSS code you need:

@media (min-width: 1200px) {
    .site-content .container {
        max-width: 730px;
    }
}

But note this will apply to the entire website, and probably will break the blog page layout (that has sidebar).

So the best way is apply only in specific pages, you can do that by adding the page id in the CSS selector. For example:

@media (min-width: 1200px) {
    .page-id-4762 .site-content .container {
        max-width: 730px;
    }
}

We hope this helps!

Let us know if you have more questions.

Kind Regards,

Rodrigo.

aThemes Support

awesome! So I need to put this in the custom css field for every page I want to style this way?
Is there no way to style the whole “full width” template? So that every page that uses the full width template rather than the standard one looks this way?

Hello,

Yes that’s possible and it’s a nice way!

Here’s the CSS you need:

@media (min-width: 1200px) {
    .page-template-page_fullwidth .site-content .container {
        max-width: 730px;
    }
}

We hope this helps!

Please try that and let us know if you need further assistance.

Kind Regards,

Rodrigo.

aThemes Support