Title: Full width page layout
Last modified: August 21, 2016

---

# Full width page layout

 *  [akedv](https://wordpress.org/support/users/ak71/)
 * (@ak71)
 * [12 years, 7 months ago](https://wordpress.org/support/topic/full-width-page-layout/)
 * ok, so if anyone needs a full width page layout within purple pro, here is the
   how to:
 * create a new file called page-fullwidth.php inside the theme folder (better use
   a child theme!) and copy this text to it:
 *     ```
       <?php
       /*
       Template Name: Fullwidth Page
       */
       ?>
       <?php get_header(); ?>
       <div class="main-fullwidth">
       	<?php if (have_posts()) while (have_posts()) : the_post(); ?>
       	<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>><div>
       		<h1><?php the_title(); ?> <?php edit_post_link(__('Edit this entry', 'purple_pro'), '', ''); ?></h1>
       		<?php the_content(); ?>
   
       		<div id="comments">
       			<?php comments_template(); ?>
       		</div>
       		<p class="pages"><?php wp_link_pages(); ?></p>
       	</div></article>
       	<?php endwhile; ?>a
       <?php get_footer(); ?>
       ```
   
 * after that we need to adjust the css to match the main-fullwidth, so ad this 
   to your custom css:
 *     ```
       .main-fullwidth {
       	float: left;
       	overflow: hidden;
       	width: 100%;
       	 margin-right: -35px;
       }
   
       .main-fullwidth article.post,
       .main-fullwidth article .page {
       	clear: both;
       	overflow: hidden;
       	margin-bottom: 30px;
       	padding: 0;
       	border: 1px solid #d8d8d8;
       	background: #fff;
       }
   
       .main-fullwidth article.post>div,
       .main-fullwidth article.page>div {
       	overflow: hidden;
       	padding: 10px 18px;
       	border: 1px solid #fff;
       	background: #fff url("images/post-bg.png") top repeat-x;
       }
   
       .main-fullwidth label {
       	float: none;
       }
   
       .main-fullwidth h3,
       .main-fullwidth h2 {
       	clear: both;
       }
       @media only screen and (min-width: 401px) and (max-width: 800px) {
   
       	.main-fullwidth {
       		margin-left: 0;
       		margin-right: 0;
       		width: 100%;
       	}
       @media only screen and (min-width: 50px) and (max-width: 400px) {
       	.main-fullwidth {
       		width: 100%;
       		padding: 15px 0 0;
       	}
       	.main-fullwidth article.post, .main-fullwidth article.page {
       		margin-right: 0;
       		margin: 0 0 10px 0;
       		padding: 0;
       	}
       ```
   
 * Now when editing a page, you can select the new template “Fullwidth Page”!
 * would be nice, if this will be included in the next theme update, just to make
   my hack obsolete 😉

The topic ‘Full width page layout’ is closed to new replies.

 * ![](https://i0.wp.com/themes.svn.wordpress.org/purple-pro/1.6/screenshot.png)
 * Purple Pro
 * [Support Threads](https://wordpress.org/support/theme/purple-pro/)
 * [Active Topics](https://wordpress.org/support/theme/purple-pro/active/)
 * [Unresolved Topics](https://wordpress.org/support/theme/purple-pro/unresolved/)
 * [Reviews](https://wordpress.org/support/theme/purple-pro/reviews/)

 * 0 replies
 * 1 participant
 * Last reply from: [akedv](https://wordpress.org/support/users/ak71/)
 * Last activity: [12 years, 7 months ago](https://wordpress.org/support/topic/full-width-page-layout/)
 * Status: not a support question