move widgets to the right, make text area wider

• 

  oaklands2017 · Member · Oct 4, 2016 at 10:17 pm

  • Copy link
  • Add topic to favorites

  Hello, I would like to move the content widgets sidebar (the logos/images) to the right. And at the same time make the text area wider. If the logos could be under the CONTACT US menu and the magnifying glass that would be ideal.

  Is there any way of doing that through CSS?

  Thanks in advance

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

• 

  innisfreehomestead · Member · Oct 4, 2016 at 11:14 pm

  • Copy link

  Hello there,

  How’s this for desktop screen sizing? (I ask because if it’s good, might need some more code to keep the sidebar in place on the tablet size etc):

  @media screen and (min-width: 1080px)
  .site-content, .site-main .widecolumn {
  	max-width: 68%;
  	width: 100%;
  }
  
  .hentry {
  	width: 100%;
  	padding: 0 20px;
  	box-sizing: border-box;
  }
  
  .content-sidebar {
  	width: 100%;
  	max-width: 161px;
  }
  }

  Let me know if that doesn’t work,
  Sage

• 

  innisfreehomestead · Member · Oct 4, 2016 at 11:14 pm

  • Copy link

  Sorry, that code won’t work, forgot a bracket, use this instead:

  @media screen and (min-width: 1080px) {
  .site-content, .site-main .widecolumn {
  	max-width: 68%;
  	width: 100%;
  }
  .hentry {
  	width: 100%;
  	padding: 0 20px;
  	box-sizing: border-box;
  }
  .content-sidebar {
  	width: 100%;
  	max-width: 161px;
  }
  }

• 

  oaklands2017 · Member · Oct 5, 2016 at 5:52 am

  • Copy link

  hello,

  the first part has worked fine, the icons/widgets have moved to the right.
  the second part no. The text area still has the same size, it is centered in the middle but with the same width.

  Thanks

• 

  innisfreehomestead · Member · Oct 5, 2016 at 3:01 pm

  • Copy link

  Hey there,

  Sorry about that, mind taking out the previous code and placing this code in instead?

  @media screen and (min-width: 1080px) {
  .site-content, .site-main .widecolumn {
  	max-width: 68%;
  	width: 100%;
  }
  .site-content .entry-header, .site-content .entry-content, .site-content .entry-summary, .site-content .entry-meta, .page-content {
  	max-width: 100%;
  }
  .hentry {
  	width: 100%;
  	padding: 0 20px;
  	box-sizing: border-box;
  	max-width: 100%;
  }
  .content-sidebar {
  	width: 100%;
  	max-width: 161px;
  }
  }

  Hope that helps,
  Sage

• 

  oaklands2017 · Member · Oct 5, 2016 at 8:50 pm

  • Copy link

  That’s so good!!! Thank you so much. It’s perfect

  David

• 

  oaklands2017 · Member · Oct 5, 2016 at 8:51 pm

  • Copy link

  That’s so good!!! Thank you so much. It’s perfect

  David

• 

  innisfreehomestead · Member · Oct 5, 2016 at 10:06 pm

  • Copy link

  Great to hear, thanks for letting me know!

  Sage