Need help? Check out our Support site, then


Adjust widget spacing

  1. 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 foodergolove.com.

  2. 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.

  3. 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;
    	}
    }
  4. Thank you. I will try it.

  5. I thought you were referring to vertical spacing.

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

  7. 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.

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

  9. bump

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

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

  12. 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.

Topic Closed

This topic has been closed to new replies.

About this Topic