Altering margin sizes

• 

  svanui · Member · Jun 21, 2014 at 11:07 pm

  • Copy link
  • Add topic to favorites

  On my pages, the text appears in a narrow strip, between where the primary side bar and secondary side bar would sit, although I have selected a full page template (ie without the side bars showing). How do I customise the margin sizes so the text actually fills the page?

  The blog I need help with is: (visible only to logged in users)

• 

  designsimply · Member · Jun 22, 2014 at 4:27 am

  • Copy link

  I looked at http://sv-takeiteasy.com/our-boat/ as an example page.

  You can adjust the width of the elements inside the page content area using this CSS:

  .full-width .archive-header,
  .full-width .comments-area,
  .full-width .image-navigation,
  .full-width .page-header,
  .full-width .page-content,
  .full-width .post-navigation,
  .full-width .site-content .entry-header,
  .full-width .site-content .entry-content,
  .full-width .site-content .entry-summary,
  .full-width .site-content footer.entry-meta {
  	max-width: 940px;
  }

  Then to fix the spacing for the attached images, you can add the following:

  @media screen and (min-width: 810px) {
  	.full-width .site-content blockquote.alignleft,
  	.full-width .site-content img.size-full.alignleft,
  	.full-width .site-content img.size-large.alignleft,
  	.full-width .site-content img.size-medium.alignleft,
  	.full-width .site-content .wp-caption.alignleft {
  		margin-left: 0;
  	}
  
  	.full-width .site-content blockquote.alignright,
  	.full-width .site-content img.size-full.alignright,
  	.full-width .site-content img.size-large.alignright,
  	.full-width .site-content img.size-medium.alignright,
  	.full-width .site-content .wp-caption.alignright {
  		margin-right: 0;
  	}
  }

  I based this example on the http://sv-takeiteasy.com/our-boat/ page, so you will want to test out the other pages after making the change to make sure everything still looks good.

• 

  svanui · Member · Jun 22, 2014 at 9:01 am

  • Copy link

  Thank you so much… That’s exactly what I was looking for. You are a champ.
  Now for a follow up query – on my ‘Posts’ page, I don’t want to see the sidebar and want to display the posts in full page, as per the other pages. (I only want to see the sidebars in the welcome/home screen. Are you able to help?

• 

  designsimply · Member · Jun 22, 2014 at 6:50 pm

  • Copy link

  Now for a follow up query – on my ‘Posts’ page

  It’s always a good idea to provide a direct link. I think this is the page you’re thinking of: http://sv-takeiteasy.com/posts-2/

  To target just that page, you can use body classes—for example, the “blog” class will target the posts page. Here is an example that will remove the sidebar and center the main content area:

  .blog .content-sidebar {
  	display: none;
  }
  .blog .site-content {
  	margin-right: 0px;
  }

  After that, expanding the widths of things starts getting a bit tricky. The featured images are a fixed width size, and you can’t make them bigger but you can stretch them—the problem with stretching them is that the quality of the images will degrade. Here is an example you can try out to see what I mean:

  .blog .hentry {
  	max-width: none;
  }
  .blog .wp-post-image, .post-thumbnail img {
  	width: 100% !important;
  }

• 

  svanui · Member · Jun 22, 2014 at 10:00 pm

  • Copy link

  Thanks again for all your help. I have now centred the blog – nicer layout. The rest does not matter too much.

• 

  designsimply · Member · Jun 23, 2014 at 6:57 pm

  • Copy link

  Cool. Looks great!