WordPress.org

Ready to get started?Download WordPress

Forums

Customizr
[resolved] Full-width in page? (8 posts)

  1. bendthelimits
    Member
    Posted 5 months ago #

    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?

  2. rdellconsulting
    Member
    Posted 5 months ago #

    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?

  3. bendthelimits
    Member
    Posted 5 months ago #

    Yes.
    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?

  4. bendthelimits
    Member
    Posted 5 months ago #

    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)

    <?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' ); ?>
                                        </article>
                                    <?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 http://www.bendthelimits.com

    Best!

  5. rdellconsulting
    Member
    Posted 5 months ago #

    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.

  6. rdellconsulting
    Member
    Posted 5 months ago #

    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...

  7. bendthelimits
    Member
    Posted 5 months ago #

    Absolutely!

    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...

  8. rdellconsulting
    Member
    Posted 5 months ago #

    I love what you've done anyway!

Reply

You must log in to post.

About this Theme

About this Topic