How to change width of entire page

• 

  fredrikstrietz · Member · Dec 29, 2014 at 1:50 pm

  • Copy link
  • Add topic to favorites

  Hello,

  how can I change the witdh (currently it’s 960 px) to 1000 px ? I just need a little bit more width, but the css

  #page {
  margin-top: 0;
  max-width: 1000px;
  }

  is not working. Nothing changed.

  Who can help me? Thanks in advance!

  Regards
  Fredrik

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

• 

  thesacredpath · Member · Dec 29, 2014 at 10:16 pm

  • Copy link

  Fredrik, Structure has different CSS selectors and the HTML and CSS and has widths set in a number of places. Replace your #page (which is #wrap in the Structure theme) with the following.

  #wrap, #header, #navbar, #content, #contentwide, #footertopbg, #footerbg {
      width: 1000px;
  }

  CSS is theme specific, so you have to make sure that you are using CSS solutions specifically for the theme you are using.

  If you are not yet familiar with the web inspector tool in your browser, take a look at our support document on How to Find Your Theme’s CSS, which has some brief screencasts to get you started using it. It makes working with CSS much easier.

  And here are a few more useful CSS related posts to help you customize your site with CSS:

  https://dailypost.wordpress.com/2013/07/25/css-selectors/
  http://dailypost.wordpress.com/2013/06/21/css-intro/

  Intro to CSS: Previewing Changes with the Matched Rule Pane

• 

  fredrikstrietz · Member · Dec 30, 2014 at 8:26 am

  • Copy link

  Thanks, that’s what I need! I will check your links later – thanks for that in advance. It’s great to have such a good support!

  Regards
  Fredrik

• 

  fredrikstrietz · Member · Dec 30, 2014 at 11:49 am

  • Copy link

  Hi again,

  one more question regarding this: I was able to change the width. I was also able to resize the background picture and it uses the full width. But I have a problem with the header picture: I changed the width but it seems that the picture was automatically reduced to the old width. How can I resolve this problem? My header picture should have the same width…

  Thanks again in advance!

  Regards
  Fredrik

• 

  thesacredpath · Member · Dec 30, 2014 at 8:47 pm

  • Copy link

  I missed one element that needs to be widened (the first rule below). The second rule makes the header image go full width.

  .headerleft {
      width: 1000px;
  }
  #header h1 a {
      background-size: cover;
  }

• 

  fredrikstrietz · Member · Dec 30, 2014 at 11:01 pm

  • Copy link

  Thanks again, that’s it.

• 

  thesacredpath · Member · Dec 31, 2014 at 2:07 am

  • Copy link

  You are welcome.