Support » Fixing WordPress » Add padding/margins between post conten & widgets.

  • Resolved thisisloze

    (@thisisloze)


    Hi I am modifying the template blaskan. I have so far got it looking pretty clean but am having a problem. I wanted to stretch out the entire layout which I did. But I am having a problem – I want to add a small spacing between where the content is and where the widget content is placed. I would like to make it a % so the theme can still properly handle the website at different resolutions.

    the site is http://www.evilgns.com and if you look at the main posts you can see the dotted line seperating the posts and the author / comment info goes all the way to the widget area and touches. I have found this code in the framework css

    @media only screen and (max-width: 992px) {
    
    	.background-image #content {
    		margin-right: 0;
    		padding-right: 0;
    	}
    
    	.sidebar.footer-widgets #primary,
    	.sidebar.footer-widgets #secondary,
    	.sidebars.footer-widgets #primary,
    	.sidebars.footer-widgets #secondary {
    		margin-bottom: 0;
    	}
    
    	#primary {
    	  border-top: 0 !important;
    	}
    
    }

    I have tried this

    #primary {
    	  border-top: 0 !important;
    margin-left: 5%;
    	}

    Not much success though. Any help would be appreciated.

Viewing 15 replies - 1 through 15 (of 18 total)
  • Moderator Andrew Nevins

    (@anevins)

    Forum moderator

    Does that theme come with a section of the dashboard named, “Custom CSS” or “Jetpack”, or are you using a Child Theme?

    No it doesn’t. I am not using a child theme either. I am modifying just the normal theme.

    Moderator Andrew Nevins

    (@anevins)

    Forum moderator

    Download & install a Custom CSS Manager plugin and use its allocated section of the dashboard to hold the following CSS;

    @media only screen and (min-width: 992px) {
      .sidebar #content {
       /* Change the width to your own value, percentage doesn't matter */
       width: 590px;
      }
    }

    Hi There:

    For this kind of coding modification, I find “Firebug” to be the tool to use.

    Everything is “temporary” while you test or view in Firebug. You can mouse over the element, make changes in your browser until you get it the way you want and then go to the right coding/file and apply those changes permanently.

    Don’t forget to backup everything before changes 🙂

    I think the code you’re looking for is here:

    <article id="post-54" class="post-54 post type-post status-publish format-standard hentry category-featured" style="padding-left: 0px; padding-right: 0px; height: 256px; width: 650%;">

    You could try the following:

    <article id="post-54" class="post-54 post type-post status-publish format-standard hentry category-featured" style="padding-left: 0px; padding-right: 0px; height: 256px; width: 90%;">

    Ron

    Ops sorry, your original code looks like this:

    <article id="post-54" class="post-54 post type-post status-publish format-standard hentry category-featured" style="padding-left: 0px; padding-right: 0px; height: 256px; width: 650px;">

    Where would this be found ronmerk? I don’t see it anywhere in my css files. I am pretty sure that is just the code your browser sees?

    Andrew this worked flawlessly! Thank you. Also where would the width of the widgets be? And if I just change this only there will it auto be corrected for every size of resolution?

    Moderator Andrew Nevins

    (@anevins)

    Forum moderator

    Here’s the width of the widgets area [screenshot] (highlighted on the right); exposed by using Google Chrome’s built-in developer tool.

    You can just add a different width next to the code that changed the width of your content,
    E.g;

    @media only screen and (min-width: 992px) {
      .sidebar #content {
       /* Change the width to your own value, percentage doesn't matter */
       width: 590px;
      }
      .sidebar #primary {
       width: 320px;
      }
    }

    Also would I have to adjust this for every section of the css?
    FOR EXAMPLE:

    @media only screen and (min-width: 992px) {
      .sidebar #content {
       /* Change the width to your own value, percentage doesn't matter */
       width: 590px;
      }
    }

    &

    @media only screen and (min-width: 768px) {
    
    	#wrapper {
    		margin: 0 auto;
    		width: 660px;
    	}
    
    	.content-wide #wrapper,
    	.sidebar #wrapper,
    	.sidebars #wrapper {
    		width: 840px;
    	}

    ect. ect.. there are a bunch of different resolutions.

    Moderator Andrew Nevins

    (@anevins)

    Forum moderator

    Unless you want the elements to look different at those resolutions, you don’t need to edit that. As the code I’ve recommended is in a media query, it won’t override other media queries that are using different resolutions.

    If you resize your browser with the website open, you can explore the current behavior of your website at different resolutions.

    Alright sweet. I downloaded the chrome developer plug and I would say its working better for me then firebug was. Thank you everyone! I am well sorted now to deal with this.

    [screenshot]

    how can I get the widget area to be somewhat in between the content and edge of screen. Currently it is flush right. Google chrome isn’t letting me find the div that the widgets are sitting in.
    I currently have content + sidebar but I want the sidebar to be not flush right.

    Moderator Andrew Nevins

    (@anevins)

    Forum moderator

    Further down the toolbar scroll on the right, there’s some more styles applying a float: right; to that element. I would post a screenshot but I’ve broken snaggy.

    So you could try adding float: left; to it instead,
    E.g;

    @media only screen and (min-width: 992px) {
      .sidebar #content {
       /* Change the width to your own value, percentage doesn't matter */
       width: 590px;
      }
      .sidebar #primary {
       width: 320px;
       float: left;
      }
    }

    I have already tried float: left. It goes way to far into the post content.
    maybe I should do a

    float: left;
    margin: 10px;

    screenshot

    Moderator Andrew Nevins

    (@anevins)

    Forum moderator

    Try adding a margin-left style instead of margin.

Viewing 15 replies - 1 through 15 (of 18 total)
  • The topic ‘Add padding/margins between post conten & widgets.’ is closed to new replies.