Adjust widget spacing

• 

  millerteachglobal · Member · Aug 28, 2013 at 12:44 pm

  • Copy link
  • Add topic to favorites

  How can I use my CSS editor to decrease the spacing between sidebar widget fields, in the Confit theme? Thanks!

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

• 

  mrdirby · Member · Aug 28, 2013 at 1:28 pm

  • Copy link

  Hi, try increasing the width of the main content container. You theme uses a % of the full width to adjust the size currently set to 64.77987421%;. If you increase that percent to 67 it looks ok until the screen gets to be 895px wide.

  #primary {
  width: 64.77987421%;
  }

  So you might want to increase your responsive size from 768px to 895px.

• 

  mrdirby · Member · Aug 28, 2013 at 1:32 pm

  • Copy link

  Here is a quick fix for responsive. You could just copy the sty for the 768 screen and apply it to 895px. Use this code.

  If someone else has a better solution I’d be interested in seeing it.

  @media screen and (max-width: 895px) {
  	#wrapper {
  		margin-right: 0;
  	}
  	#page::before {
  		background-color: transparent;
  		min-height: auto;
  		position: relative;
  			top: auto;
  			left: auto;
  		width: auto;
  	}
  	#masthead {
  		background-color: rgba(255,255,255,0.95);
  		border-radius: 0 0 3px 3px;
  		float: none;
  		margin: 0 auto 48px;
  		margin: 0 auto 4.8rem;
  		padding: 24px 0;
  		padding: 2.4rem 0;
  		width: 618px;
  	}
  	.header-image {
  		margin-right: auto;
  		margin-left: auto;
  	}
  	#masthead hgroup {
  		margin: 0 4.85436893% 24px;
  		margin: 0 4.85436893% 2.4rem;
  	}
  	.main-navigation {
  		float: none;
  		margin: 0 4.85436893%;
  		width: auto;
  	}
  	.main-small-navigation {
  		border: 1px solid rgba(0,0,0,0.2);
  		border-right: none;
  		border-left: none;
  		margin: 0 4.85436893%;
  	}
  	.menu-toggle {
  		padding: 10px 0;
  		padding: 1.0rem 0;
  	}
  	#primary,
  	#secondary {
  		float: none;
  		width: 618px;
  		margin: 0 auto;
  	}
  	#secondary {
  		background-color: rgba(255,255,255,0.95);
  		border-radius: 3px;
  	}
  	.widget {
  		margin: 0 4.85436893% 24px;
  		margin: 0 4.85436893% 2.4rem;
  	}
  	#secondary .widget:first-child {
  		margin-top: 24px;
  		margin-top: 2.4rem;
  	}
  	.site-footer {
  		margin: 24px auto 0;
  		margin: 2.4rem auto 0;
  		width: 618px;
  	}
  	#infinite-handle span {
  		display: block;
  	}
  	#infinite-footer .container {
  		margin: 0 auto;
  	}
  }

• 

  millerteachglobal · Member · Aug 28, 2013 at 1:35 pm

  • Copy link

  Thank you. I will try it.

• 

  justpi · Member · Aug 28, 2013 at 1:43 pm

  • Copy link

  I thought you were referring to vertical spacing.

• 

  millerteachglobal · Member · Aug 29, 2013 at 4:32 am

  • Copy link

  justpi, I am. I am new at css…maybe someone could hold my hand through it?

• 

  justpi · Member · Aug 29, 2013 at 7:01 am

  • Copy link

  If you mean the space between each widget and the next, add this and decrease the value:

  .widget {
      margin-bottom: 4.8rem;
  }

  If you mean the line spacing in widgets that display lists (such as the Categories widget), add this and decrease the value:

  .widget ol, .widget ul {
      line-height: 1.9;
  }

  If you mean something else, please clarify.

• 

  millerteachglobal · Member · Aug 29, 2013 at 8:59 am

  • Copy link

  justpi, I am referring to the vertical spacing between widgets.

• 

  millerteachglobal · Member · Aug 30, 2013 at 11:27 am

  • Copy link

  bump

• 

  justpi · Member · Aug 30, 2013 at 12:51 pm

  • Copy link

  ? I gave the code for this in my previous reply.

• 

  millerteachglobal · Member · Aug 30, 2013 at 1:11 pm

  • Copy link

  justpi, I apologize. I am new at CSS. Where do I insert that code? Thank you.

• 

  justpi · Member · Aug 30, 2013 at 2:23 pm

  • Copy link

  You go to Appearance > Customize > CSS, delete the welcome message (including the asterisks and the slashes), and paste this:

  .widget {
      margin-bottom: 4.8rem;
  }

  Start decreasing the value till you get the spacing you prefer, save.