WordPress.org

Ready to get started?Download WordPress

Forums

Twenty Thirteen
How to have Twenty Thirteen be the width of the browser (3 posts)

  1. Rowker
    Member
    Posted 4 months ago #

    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!

  2. Guust
    Member
    Posted 2 months ago #

    Whose browser, yours or mine?
    Resized or not? Get the idea?

  3. Babaloo
    Member
    Posted 4 weeks ago #

    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.
    http://wordpress.org/support/topic/full-width-page-template-2?replies=26
    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(); ?>
    			</div>
    			<?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; ?>
    ...

Reply

You must log in to post.

About this Theme

About this Topic