Thank you for reading my question.

I can't seem to figure out a way to make this page full width (or almost full width). When i am on tablet and mobile phone it does fill the screen almost entirely. Does anyone have a suggestion about where to start with customising these settings?

Thank you.

<?php
/**
 * Template Name: Full Width
 *
 */

get_header(); ?>

<div class="row">

<div id="primary" class="content-area">

    <div class="large-12 columns">

        <main id="main" class="site-main" role="main">

            <?php while ( have_posts() ) : the_post(); ?>

                <?php get_template_part( 'template-parts/content', 'page' ); ?>

                <?php
                    // If comments are open or we have at least one comment, load up the comment template
                    if ( comments_open() || get_comments_number() ) :
                        comments_template();
                    endif;
                ?>

            <?php endwhile; // end of the loop. ?>

        </main><!-- #main -->

    </div><!-- .large-12 -->

</div><!-- #primary -->

</div><!-- .row -->

<?php get_footer(); ?>

i use the template shown above on the homepage of my site.

Thank you for reading my question.

I can't seem to figure out a way to make this page full width (or almost full width). When i am on tablet and mobile phone it does fill the screen almost entirely. Does anyone have a suggestion about where to start with customising these settings?

Thank you.

<?php
/**
 * Template Name: Full Width
 *
 */

get_header(); ?>

<div class="row">

<div id="primary" class="content-area">

    <div class="large-12 columns">

        <main id="main" class="site-main" role="main">

            <?php while ( have_posts() ) : the_post(); ?>

                <?php get_template_part( 'template-parts/content', 'page' ); ?>

                <?php
                    // If comments are open or we have at least one comment, load up the comment template
                    if ( comments_open() || get_comments_number() ) :
                        comments_template();
                    endif;
                ?>

            <?php endwhile; // end of the loop. ?>

        </main><!-- #main -->

    </div><!-- .large-12 -->

</div><!-- #primary -->

</div><!-- .row -->

<?php get_footer(); ?>

i use the template shown above on the homepage of my site.

https://www.tuberadar.nl

• php
• css
• html

• Straight CSS and HTML question. I would ask at stackoverflow – jdm2112 Commented Jun 6, 2019 at 2:45

2 Answers 2

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.

I had this problem alot. I am not sure if you are using a page builder like Visual Composer but if you are you will have to use the full width element in the builder as well as changing the page template to full width template.