Decrease page width in Big Brother theme

• 

  inmercyrejoice · Member · Aug 21, 2015 at 9:16 pm

  • Copy link
  • Add topic to favorites

  For the record I am already a Premium member. I posted this question three times and never get a direct response that addresses my issue.
  Can someone who is knowledgeable about resolving this within the CSS file as there is no stylesheet on WordPress.com free themes.

  Thank you. My site is: http://livinglifeconfinedtobed.com/

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

• 

  thistimethisspace · Member · Aug 21, 2015 at 9:19 pm

  • Copy link

  Thanks for posting to the correct support forum where you will get the help you need.

  Please be patient while waiting for Staff or a Volunteers who chooses to provide free CSS editing advice gets to this thread and assist you.

• 

  thesacredpath · Member · Aug 22, 2015 at 6:41 am

  • Copy link

  @inmercyrejoice, at WordPress.com we do not edit the CSS. What we do is create CSS rules that will override the existing CSS.

  If you only want to make the content narrower, you can add the following CSS to your custom CSS and edit the max-width value as you desire.

  .site-content, .main-navigation ul, .site-footer-wrapper {
      max-width: 1280px;
  }

  If I’ve misunderstood, please let me know.

• 

  inmercyrejoice · Member · Aug 22, 2015 at 8:15 pm

  • Copy link

  Hi thank you. No I’d like to decrease the whole page size including header with my photo. Thanks for your help. :)

• 

  inmercyrejoice · Member · Aug 22, 2015 at 8:16 pm

  • Copy link

  Hi thank you. No I’d like to decrease the whole page size including header with my photo. Thanks for your help. :)

• 

  inmercyrejoice · Member · Aug 22, 2015 at 8:18 pm

  • Copy link

  Also I would like to make the main navigation menu bar transparent so my photo shows but I want the page tabs to show also just not the shadow background of the tabs.

• 

  g471n · Member · Aug 23, 2015 at 10:33 am

  • Copy link

  Hi inmercyrejoice

  Try this.

  div#page {
      width: 80%;
      margin-left: auto;
      margin-right: auto;
  }

• 

  inmercyrejoice · Member · Aug 23, 2015 at 7:35 pm

  • Copy link

  Hi ty it helped but if you take a look you will see the content width is less than the header width.

  I would like to increase the page width to the width the new header width. Can you help me with that?

  Thanks so much!

• 

  g471n · Member · Aug 24, 2015 at 6:56 am

  • Copy link

  Here you go. Let me know if you need any other help.

  .primary.content-area {
      padding-left: 0px;
  }
  .article-wrapper {
      padding-left: 0px;
      padding-right: 0px;
  }

• 

  inmercyrejoice · Member · Aug 30, 2015 at 2:36 am

  • Copy link

  Thanks again. But none of these worked in CSS to decrease entire page width including header photo. It only decreased the width of the posts and widget area, making the header look too wide. :(

• 

  inmercyrejoice · Member · Aug 30, 2015 at 2:36 am

  • Copy link

  Thanks again. But none of these worked in CSS to decrease entire page width including header photo. It only decreased the width of the posts and widget area, making the header look too wide. :(

• 

  thesacredpath · Member · Aug 30, 2015 at 4:01 am

  • Copy link

  To narrow the entire theme, including the navigation and header, add the following CSS and adjust the max-width as desired.

  #page {
      max-width: 700px;
      margin-left: auto;
      margin-right: auto;
  }

• 

  inmercyrejoice · Member · Aug 30, 2015 at 4:18 am

  • Copy link

  Thank you. That works. The only problem is that the posts width is a bit narrower than the header, so it looks awkward. I left it as it was. Is there is a way to have the header width line up with post and widget area?

  Thank you so much for all your help.

• 

  thesacredpath · Member · Aug 30, 2015 at 5:55 am

  • Copy link

  We can do that. In addition to the above, add the following two rules which removes the left padding from the content area and the right padding from the sidebar area.

  .primary {
      padding-left: 0;
  }
  .secondary {
      padding-right: 0;
  }

• 

  inmercyrejoice · Member · Aug 30, 2015 at 6:27 pm

  • Copy link

  Yay! That worked. Thank you so much again! :)

• 

  inmercyrejoice · Member · Aug 30, 2015 at 6:28 pm

  • Copy link

  Yay! That worked. Thank you so much again! :)

• 

  thesacredpath · Member · Aug 31, 2015 at 1:47 am

  • Copy link

  You are welcome.

• 

  inmercyrejoice · Member · Aug 31, 2015 at 2:14 am

  • Copy link

  one more question – how can I change the color of the widget area without hiding the text? I tried to do it myself but the text disappears. As it is right now, the widget area blends in with the background.

  Thanks so much!

• 

  inmercyrejoice · Member · Aug 31, 2015 at 2:54 am

  • Copy link

  Oh dear, you’re going to think I’m becoming a pain. Sorry, but I just have one more question. Is there a way to change the background color of the post page from the bright white to something less harsh on the eyes? I’ve searched the forums and google and CSS code I have tried failed. Thank you in advance for your patience with me.

• 

  g471n · Member · Aug 31, 2015 at 7:16 am

  • Copy link

  Hi inmercyrejoice

  To change the background colour of the post page:

  .article-wrapper {
      background-color: #B7AFBC;
  }

  You can change the #B7AFBC value to select a color of your choice.

  A great site for finding color values – http://www.w3schools.com/tags/ref_colorpicker.asp or http://www.color-hex.com/