Support » Theme: Twenty Thirteen » How to have Twenty Thirteen be the width of the browser

  • I like the Twenty Thirteen Theme and its responsiveness. How would I widen the content area so that it is closer to the full width of the browser, while keeping the responsiveness.

    Thanks for the help!

Viewing 2 replies - 1 through 2 (of 2 total)
  • Whose browser, yours or mine?
    Resized or not? Get the idea?

    The main idea you got to grasp with Twenty Thirteen is that it has a max-width set to a fixed size, 1080px, meaning the site’s body width will remain at 1080px from 1024px resolutions and up, including Full HD, Retina displays (iPad 3 & 4, iPhone 4 & 5) and other large screen formats.
    To change that you need to replace or append this fixed max-width spec (1080px) on your child theme’s css to a relative measure. Check this thread dealing with a full width page conundrum and look at migf1’s solution towards the bottom of the thread, copied below.
    In the Child’s theme CSS file add:

    .my-full-size {
    	margin-left: auto !important;
    	margin-right: auto !important;
    	height: auto;
    	padding-right: 1em !important;

    And then, in my full-width-page.php file I just add the my-full-size class to the desired elements:

    <?php /* The loop */ ?>
    <?php while ( have_posts() ) : the_post(); ?>
    	<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
    		<header class="entry-header my-full-size">
    			<?php if ( has_post_thumbnail() && ! post_password_required() ) : ?>
    			<div class="entry-thumbnail">
    				<?php the_post_thumbnail(); ?>
    			<?php endif; ?>
    			<h1 class="entry-title my-full-size"><?php the_title(); ?></h1>
    		</header><!-- .entry-header -->
    		<div class="entry-content my-full-size">
    			<?php the_content(); ?>
    			<?php wp_link_pages( array( 'before' => '<div class="page-links"><span class="page-links-title">' . __( 'Pages:', 'twentythirteen' ) . '</span>', 'after' => '</div>', 'link_before' => '<span>', 'link_after' => '</span>' ) ); ?>
    		</div><!-- .entry-content -->
    		<footer class="entry-meta">
    			<?php edit_post_link( __( 'Edit', 'twentythirteen' ), '<span class="edit-link">', '</span>' ); ?>
    		</footer><!-- .entry-meta -->
    	</article><!-- #post -->
    	<?php comments_template(); ?>
    <?php endwhile; ?>

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘How to have Twenty Thirteen be the width of the browser’ is closed to new replies.