Decrease Main Column Width

• 

  benconners · Member · Jan 14, 2016 at 3:28 pm

  • Copy link
  • Add topic to favorites

  Hi there,

  I’m looking for css code that I can add to my blog that would allow me to narrow the width of my main column of text and photos a tad (while keeping the width of the blog’s background and sidebar the same).

  Thanks for the help!

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

• 

  ogurel · Member · Jan 14, 2016 at 10:13 pm

  • Copy link

  Hi,

  We can use the below Custom CSS code to narrow the width of your main column of text and photos.

  @media only screen and (min-width: 767px)
  #content {
      width: 65%;
  }

  By modifying the width percentage, you can change current default value of 68%.

  The min-width: 767px value will ensure that this change only affects desktops or other devices with a screen resolution of 767px or higher.

  I hope this is the modification you needed and please let me know if you need anything else.

  Take care,

  Onur

• 

  staff-jeanpierreac · Staff · Jan 15, 2016 at 10:47 pm

  • Copy link

  Hi there.

  Your Theme is responsive, so it have 2 different width definitions depending on the browser width to adapt the visualization to PC as well as to cellphones. If your screen is wider than 767px, your content will fit in the 68% of the global width. In case it is narrower, it will take the whole width.

  I assume you would like to change it just in wider screens. The key point to narrow the text area, without changing sidebar or global width is to add a margin with the same size you pick to the #content area.

  Now it is:

  @media only screen and (min-width: 767px)
  #content {
      width: 68%;
  }

  So you could add this to your custom CSS (Adapting values to your needs)

  @media only screen and (min-width: 767px)
  #content {
      width: 65%;
      margin-right: 3%;
  }

  I hope this helps! :)

• 

  benconners · Member · Jan 20, 2016 at 10:30 pm

  • Copy link

  Thanks guys!

• 

  ogurel · Member · Jan 20, 2016 at 10:49 pm

  • Copy link

  It’s a pleasure, I am glad raulanton added the extra margin which will adapt to different screen sizes.

  Please feel free to ask if you need anything else.

• 

  staff-jeanpierreac · Staff · Jan 21, 2016 at 6:09 am

  • Copy link

  You are welcome.

  Have a great day both of you!