0

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

0

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.

  • Hi thank you a lot for helping me. For now i fixed it by adding this code to the "Extra Css" section of my site. .row { max-width: 100%; } – Amsterdam_020 Jun 6 at 10:10
  • However i do have another question about this, there still is some white space on the left and right and i would like to keep that white space. But sometimes you see a website that is completely filled with full screen pictures and sections so there is no white space on the sides at all. Is that also possible with my site? I am just curious if it is possible.. Have a nice day! – Amsterdam_020 Jun 6 at 10:15
  • Yes, that white space is usually made with padding and margins. It's pretty simple to add or remove with CSS. – Faye Jun 6 at 18:52
  • Cool, thank you Faye! – Amsterdam_020 Jun 6 at 19:47
0

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.

  • Hi thank you for your reply, i am not using a page builder. This is just how the theme is build. – Amsterdam_020 Jun 6 at 10:01
  • In that case you could make css changes or create another template page with hard coded full width. Also a child theme would have to be created to keep this template after theme updates. This will require using file manager in cpanel. Are you comfortable with that? – eweber Jun 7 at 13:22

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.