How to change size of sidebar (Adelle Theme)

• 

  notyourcomfortzone · Member · Sep 8, 2014 at 8:20 pm

  • Copy link
  • Add topic to favorites

  Hey there!

  I’m still a newbie in CSS and I would be really happy if someone helps me with the following:

  Currently, I’m using the Adelle Theme and I would like to make it wider as it is actually do not have the full-width. I would be using this code:
  
  @media screen and (min-width: 37.5em) {
  .site {
  max-width: 80em;
  }
  }

  When I use this, the sidebar becomes also wider – like 1/4 of the page. I would like to make it smaller. I tried #sidebar etc. but it didn’t change anything.

  Can somebody help me with this issue?
  Thanks a lot!

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

• 

  thesacredpath · Member · Sep 9, 2014 at 3:44 am

  • Copy link

  Since Adelle is a responsive width theme, the primary (content area) and secondary (sidebar area) widths are set as a percentage of the overall width of the theme. If you increase the width in .site, you can then narrow the sidebar and widen the content area with the following. My suggestion is to widen the content area by the same amount you narrow the sidebar. Example: reduce the secondary (.widget-area) from 29.4118% to 20.4188% and then add 9% to the primary (.content-area), (62.7451% + 9% = 71.7451%).

  .site-main .content-area {
  width: 62.7451%;
  }
  .site-main .widget-area {
  width: 29.4118%;
  }

• 

  notyourcomfortzone · Member · Sep 9, 2014 at 5:57 am

  • Copy link

  Thank you so much for your quick response! This support forum is incredible!

  Changing the percentage narrows the sidebar but what I wanted was to “stretch” the main body as well – if you visit notyourcomfortzone.com now, you will see, that the header still has the original size while everything else is wider.

  I combined both code snippets – this probably might be helpful for others as well!

  @media screen and (min-width: 37.5em) {
  	.site {
  		max-width: 75em;
  	}
  }
  
  .site-main .content-area {
  	width: 67.7451%;
  }
  
  .site-main .widget-area {
  	width: 24.4118%;
  }

  I think it’s not way to wrong? What do you think?
  Thank you and have a great day

• 

  thesacredpath · Member · Sep 9, 2014 at 5:10 pm

  • Copy link

  Yes, and sorry for not being more clear, that is exactly what I was thinking, adding what I gave to what you already had.

  My only other suggestion would be to add these two rules,

  .site-main .content-area {
  	width: 67.7451%;
  }
  
  .site-main .widget-area {
  	width: 24.4118%;
  }

  into the media query so that it affects the widths only at widths greater than 37.5em.

• 

  notyourcomfortzone · Member · Sep 9, 2014 at 5:11 pm

  • Copy link

  That’s great,
  thank you so much!

  Have a great day!

• 

  thesacredpath · Member · Sep 9, 2014 at 5:38 pm

  • Copy link

  You too, and you are welcome.