Shift Sidebar to bottom

• 

  alfredfoodography · Member · Jun 11, 2012 at 8:23 pm

  • Copy link
  • Add topic to favorites

  Hello All,

  Newbie Needing some advice on how to add a bottom bar for my widgets.

  Many Thanks in Advance.

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

• 

  thesacredpath · Member · Jun 12, 2012 at 1:37 am

  • Copy link

  Because fresh and clean is a responsive design (adjusts to the width of the screen/browser window it is viewed on, moving the sidebar to the bottom would not likely work too well and may “blow up” on tablets and smart phones.

  My suggestion would be to find a theme that already has a bottom widget area.

• 

  justpi · Member · Jun 12, 2012 at 1:52 am

  • Copy link

  See here:

  Sidebars and other widget areas: number and position

• 

  designsimply · Member · Jun 14, 2012 at 11:36 am

  • Copy link

  What you’re asking is doable, but I see the main problem is height. If you move widgets around with absolute positioning, then you have to set the width and height spacing for them manually.If you choose widgets that don’t have variable heights, then it could work. You can get around the responsive issue thesacredpath mentioned by using a media query so the new CSS only affects large displays and not small ones.

  Here is a basic example you can use as a starting point if you’re interested in experimenting. I added the red borders so you can visualize where the widgets are during testing.

  @media (min-width: 650px) {
  	#sidebar {
  		position: relative;
  	}
  	#rss_links-2 {
  		border: 1px solid red;
  		display: block;
  		position: absolute;
  		width: 250px;
  		bottom: -125px;
  		left: -640px;
  	}
  	#blog_subscription-2 {
  		border: 1px solid red;
  		display: block;
  		position: absolute;
  		width: 250px;
  		bottom: -193px;
  		left: -390px;
  	}
  	#colophon {
  		border: 1px solid red;
  		padding-top: 193px;
  	}
  }

  Note how padding-top for the #colophon matches the height of the tallest moved widget.