WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Add padding/margins between post conten & widgets. (19 posts)

  1. thisisloze
    Member
    Posted 2 years ago #

    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.

  2. Andrew
    Forum moderator
    Posted 2 years ago #

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

  3. thisisloze
    Member
    Posted 2 years ago #

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

  4. Andrew
    Forum moderator
    Posted 2 years ago #

    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;
      }
    }
  5. ronmerk
    Member
    Posted 2 years ago #

    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

  6. ronmerk
    Member
    Posted 2 years ago #

    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;">

  7. thisisloze
    Member
    Posted 2 years ago #

    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?

  8. thisisloze
    Member
    Posted 2 years ago #

    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?

  9. Andrew
    Forum moderator
    Posted 2 years ago #

    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;
      }
    }
  10. thisisloze
    Member
    Posted 2 years ago #

    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.

  11. Andrew
    Forum moderator
    Posted 2 years ago #

    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.

  12. thisisloze
    Member
    Posted 2 years ago #

    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.

  13. thisisloze
    Member
    Posted 2 years ago #

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

  14. Andrew
    Forum moderator
    Posted 2 years ago #

    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;
      }
    }
  15. thisisloze
    Member
    Posted 2 years ago #

    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

  16. Andrew
    Forum moderator
    Posted 2 years ago #

    Try adding a margin-left style instead of margin.

  17. thisisloze
    Member
    Posted 2 years ago #

    Yup this worked :D thanks.

  18. thisisloze
    Member
    Posted 2 years ago #

    Now I am running into widget spacing problem. I have tried adding a padding to the bottom of this

    .widget li:last-child { padding: 2px 0px 5px 2px; }
      .widget li {
    padding: 2px 0px 5px 2px;
    }

    I want my widget area to be spaced and neat like
    http://www.runthetrap.com

    Google dev tool is giving me this .widget li:last-child

    but even with the 5px pad its still starting right after the above widget.

  19. Andrew
    Forum moderator
    Posted 2 years ago #

    I'm not sure what you consider as neat, but have you tried this;

    .widget {
     margin-bottom: 10px;
    }

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.