Make a full-width wordpress page

This is more of a CSS question than a template question.

The class “row” is adding a max width of 75rem on your template.

Looks like this in the inspector:

.row {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0;
    margin-bottom: 0;
    max-width: 75rem;
}

That’s coming from this style sheet: https://tuberadar.nl/wp-content/themes/gateway/app.css?ver=5.1.1

Without rooting through the Gateway theme itself, I couldn’t tell you if there’s a specific place to change this in the admin panel. If your theme has settings, just look through for something that says 75rem, or 75, and see if that’s something you can change. It might be under a label like “container width”.

If that doesn’t pan out, and if you’re already poking around in the files there’s a couple ways you can handle this:

Option 1.

Remove the class “Row” from the full width template you posted above. Without a deeper look, I couldn’t tell you if this is recommended or not but when I removed it with the inspector nothing on the homepage broke, so it’s possible it wouldn’t impact anything.

Option 2. Recommended.

Add another class to the template such as <div class="row full-width-row"> and then add some css to your theme files.

.full-width-row { 
   max-width: 100%;
}

That will get rid of the 75rem it’s currently set to.

If you’re not familiar with css, or if your theme is compiling sass / less, then you can always add this code through the WordPress admin. Go to Appearance > Editor to use the stylesheet. But I do recommend finding a developer who can help you properly add the code to your theme if at all possible.

Related Posts: