How to make text area wider?

• 

  saanajaakkola · Member · Jul 5, 2014 at 7:11 am

  • Copy link
  • Add topic to favorites

  Am I able to make the text area wider on my Sundance theme by using CSS? I mean that the margin on the left would be smaller. Now there is a huge gab on the left side before the text starts. So I’d like to make my posts wider and maybe make a gap between post text and widget area a bit bigger if that’s possible. Thanks for any tips.

  PS. Also, is it possible to make header image full screen wide? Or at least a bit wider, again to decrease margins on the left and right side.

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

• 

  thesacredpath · Member · Jul 7, 2014 at 5:52 pm

  • Copy link

  Hi there, I see this thread is marked as resolved, but do not see in your custom CSS where you have widened the text area. If you are still interested in doing that, please let us know.

  I did notice one thing in your custom CSS which is resulting in your content being cut off on the left side and unreadable on smaller devices such as phones and small tablets. To correct that, remove the following rule from your existing CSS.

  .entry-content, .entry-summary, .entry-meta, h1.entry-title {
      margin-left: -15%;
  }

  If you can let us know what you were wanting to accomplish with the above rule, we can help you do it in a way that will keep your site readable on all devices.

• 

  saanajaakkola · Member · Jul 7, 2014 at 6:15 pm

  • Copy link

  Hi and thanks so much for reply. I was actually trying to accomplish exactly the topic of this thread with that rule you spotted (you can probably tell that I’m a beginner what comes to CSS customization…) I read about this in some other thread and it looked it worked so I left it like that. But true, I never checked it with my phone, for example.

  So yes, I would appreciate very much if you could help me to add the correct rule to make the text area wider! :) Thanks for your help.

• 

  thesacredpath · Member · Jul 7, 2014 at 9:01 pm

  • Copy link

  Hi, right now your theme, which is a responsive width theme, has a maximum width of 984px. You can make that wider by adjusting the max-width value in the following CSS. As an example, if you wanted to widen #page by 100px, you would change 984px to 1084px.

  #page {
  max-width: 984px;
  }

  Whatever increase you decide to use above, also add that amount to the 652px for the standard theme content width and enter that new value in the Content Width box below the CSS edit area so that images inserted at full size in the content area will span the entire width of the content area.

  The header area is a child element of #page so the maximum width of the header would be the same as the maximum width of the #page element. The following would allow you to widen the header image after widening the #page element. Just add the following CSS and use the same width value as #page. With the header image you are using, the reduction in quality is less apparent though.

  .site-header img {
      width: 984px;
  }

  A note on the above widening of the header image. There will be a reduction in image quality since the browser is being asked to widen the header image and they aren’t really equipped to do that well.

  See where the above gets us and we will work from there.