Changing page margins

• 

  queensihi · Member · Nov 15, 2016 at 1:37 am

  • Copy link
  • Add topic to favorites

  Is it possible to change the margins between the edge of content areas, header, and footer and where any of my content is inserted. (Is there a way to push various items closer to the edge)

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

• 

  thesacredpath · Member · Nov 17, 2016 at 11:50 pm

  • Copy link

  Hi, on the header on your site, it is expanding to fit the browser width. The content area has a max-width setting of 660px and the footer widget wrapper a max-width of 1000px. We can adjust those max-width values using CSS, but the one thing to keep in mind is that as text-based content, such as in the content area gets wider, it gets harder for people to read. As a general rule, I recommend content widths between 500 and 750px. There is actually a more complex way of calculating content width that depends on line spacing and font size.

  If you wish, the following CSS will set the max width for the content area at 1000px, the same as the footer widget wrapper.

  @media screen and (min-width: 1000px) {
    .single-jetpack-portfolio .entry-header, .page-header, .single-jetpack-portfolio .entry-content, .page-content, .page .entry-meta, .single-jetpack-portfolio .entry-meta, .comments-area, .post-navigation, .posts-navigation {
      max-width: 1000px;
      width: 100%;
    }
  }

  Go to Customize > CSS, delete all the informational text in that window, and paste in the above custom CSS. Also, in the Media Width field below the CSS entry area, put the max width value from above. You can edit the 1000px value as desired.