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 12 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 10 months ago #

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

  3. Babaloo
    Member
    Posted 8 months 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