WordPress.org

Ready to get started?Download WordPress

Forums

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

  1. thisisloze
    Member
    Posted 1 year 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 Nevins
    Barrel Rider, Spam Zapper & Volunteer Moderator
    Posted 1 year 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 1 year ago #

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

  4. Andrew Nevins
    Barrel Rider, Spam Zapper & Volunteer Moderator
    Posted 1 year 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 1 year 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 1 year 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 1 year 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 1 year 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 Nevins
    Barrel Rider, Spam Zapper & Volunteer Moderator
    Posted 1 year 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 1 year 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 Nevins
    Barrel Rider, Spam Zapper & Volunteer Moderator
    Posted 1 year 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 1 year 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 1 year 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 Nevins
    Barrel Rider, Spam Zapper & Volunteer Moderator
    Posted 1 year 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 1 year 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 Nevins
    Barrel Rider, Spam Zapper & Volunteer Moderator
    Posted 1 year ago #

    Try adding a margin-left style instead of margin.

  17. thisisloze
    Member
    Posted 1 year ago #

    Yup this worked :D thanks.

  18. thisisloze
    Member
    Posted 1 year 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 Nevins
    Barrel Rider, Spam Zapper & Volunteer Moderator
    Posted 1 year 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.