Close Gap Between Entry And Sidebar

Community Forums Forums Design Tips and Tricks Close Gap Between Entry And Sidebar

This topic is: not resolved

Tagged: , , , , ,

This topic contains 3 replies, has 2 voices, and was last updated by  Lauren @ OnceCoupled 4 months ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #110551

    Porter
    Member
    Post count: 215

    I have a blank space between my entry and my sidebar, which is desired. I’m wondering what the proper way to close the gap between the two is. I simply want it to be the same size as the gap between my navigation and my entry (vertical).

    I’m using the Genesis Sample theme as my foundation, so all code is the same as seen there. I tried adding:

    .site-inner {
    	clear: both;
    	padding-top: 40px;
    	padding-top: 2.4rem;
    	padding-left: 2.4rem; //* Added this
    }

    That closed the gap, but I’m quite new to css, and I’d prefer to do these edits as proper as possible, and learn something along the way. Also, if anyone could explain the relationship between px and rem (when is rem used, should I have both px and rem, etc), that would be excellent.


    I gladly accept beer donations – payment@gemfruit.com

    • This topic was modified 4 months ago by  Porter.
    • This topic was modified 4 months ago by  Porter.
    • This topic was modified 4 months ago by  Porter.
    • This topic was modified 4 months ago by  Porter.
    http://foundingfathersbar.com/
    #110557

    Lauren @ OnceCoupled
    Member
    Post count: 611

    .site-inner contains .content and .sidebar, so adding padding to it is going to throw off your design. Instead, since these are floated left and right respectively, to bring them closer to together we need to increase one of their widths. We know the spacing in the sample theme is 40px, so if we want to decrease that to 24px we need to add 16px somewhere. For example, we could change .sidebar-primary from width: 360px to width: 376px.

    (Also, when specifying rem dimensions, you want to have a fall-back px for browsers that can’t handle the rem. And likewise when you change a dimension in rem, do the same in px. So for .site-inner you should have padding-top: 24px.)


    I do custom WordPress work! http://oncecoupled.com
    Contact me directly: lauren@oncecoupled.com

    #110559

    Porter
    Member
    Post count: 215

    Excellent response, thanks a lot!

    While it’s probably obvious, I’m awake way too early to think too deeply and must ask – what is the value relationship between rem and px? 1rem = 10px?


    I gladly accept beer donations – payment@gemfruit.com

    #110581

    Lauren @ OnceCoupled
    Member
    Post count: 611

    It depends on your root element. To make everything easy, we use body { font-size:62.5%; } to create the relationship 1rem = 10px.


    I do custom WordPress work! http://oncecoupled.com
    Contact me directly: lauren@oncecoupled.com

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.