Support » Theme: Customizr » Full-width in page?

  • Resolved bendthelimits


    Is it possible to make a full-width <div> in any page.

    So far I managed to do:
    In CSS (Child theme)

    #wideBackground-pink {
     min-width: 100%;
     margin-left: auto !important;
     margin-right: auto !important;
     background: pink;

    In HTML of test page:

    <div id="wideBackground-pink">Test</div>

    I have tested variations with margin, width, and others and still have not been able to remove the two margins on the page.

    Any ideas?

Viewing 7 replies - 1 through 7 (of 7 total)
  • Still not seen this one conquered yet (though some have tried)!

    In Customiz’it>Pages & Posts Layout, did you set the global default to No Sidebars?

    The best that I have been able to accomplish so far is with the use of margin: -45px for the left and right but I believe it is not a good solution…

    I was hoping it would not be that complicated. Is it not that behavior of the Footer?

    I’ve taken a different approach:
    I’ve created a new page template copying and editing the original.
    Placed it in the child-theme folder.
    Added CSS code to remove the title & icon and that’s it!

    Now i can use this page template for any sort of element filling the screen.
    If anyone is interested:

    New page template (fullwidthempty-page.php)

    Template Name: Full Width Empty
    <?php do_action( '__before_main_wrapper' ); ##hook of the header with get_header ?>
                            <?php if ( have_posts() ) : ?>
                                <?php while ( have_posts() ) : ##all other cases for single and lists: post, custom post type, page, archives, search, 404 ?>
                                    <?php the_post(); ?>
                                    <?php do_action ('__before_article') ?>
                                        <article <?php tc__f('__article_selectors') ?>>
                                            <?php do_action( '__loop' ); ?>
                                    <?php do_action ('__after_article') ?>
                                <?php endwhile; ?>
                            <?php endif; ##end if have posts ?>
    <?php do_action( '__after_main_wrapper' );##hook of the footer with get_get_footer ?>

    CSS code to hide title and icon:

    /* Remove everywhere page icon AND title on static pages */
    .page .entry-header h1 {display: none;

    Will be updating pages with this kind of layout at


    Terrific! Just given it a quick try and can’t see anything wrong.

    I’ll snippetize it and pass credit to you.

    Let me know if you find anything wrong.

    Started a snippet and realised that there’s lots more to it if you want a full-width Front Page, with Slider, FPs etc.

    I’ve asked for Nic’s opinion…


    It was not my intention to have a full-width Front page from this template.
    It is just intended to get rid of the margins in a secondary page (the margins seem to come from the containers.)

    I’ve tested with and without the slider and seems to work fine…

    I love what you’ve done anyway!

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Full-width in page?’ is closed to new replies.