• Skip to main content
  • Skip to forum navigation

StudioPress

  • Shop for Themes
  • My StudioPress

Forum navigation

  • Home
  • General Genesis Discussions
  • StudioPress Themes
  • Genesis Blocks
    • Genesis Blocks
    • Genesis Custom Blocks
  • Retired Themes
  • FAQs
  • Forum Rules
  • Internationalization and Translations
  • Forum Bugs and Suggestions
  • Forum Log In

Are You Using The WordPress Block Editor?

Genesis now offers plugins that help you build better sites faster with the WordPress block editor (Gutenberg). Try the feature-rich free versions of each plugin for yourself!

Genesis Blocks Genesis Custom Blocks

Close Gap Between Entry And Sidebar

Welcome!

These forums are for general discussion on WordPress and Genesis. Official support for StudioPress themes is offered exclusively at My StudioPress. Responses in this forum are not guaranteed. Please note that this forum will require a new username, separate from the one used for My.StudioPress.

Log In
Register Lost Password

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

This topic is: not resolved

Tagged: css, entry, gap, rem, Sidebar, Spacing

  • This topic has 3 replies, 2 voices, and was last updated 8 years, 9 months ago by Lauren @ OnceCoupled.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • June 19, 2014 at 7:10 am #110551
    Porter
    Participant

    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.


    Buy me a beer? | Try DigitalOcean VPS Hosting

    http://foundingfathersbar.com/
    June 19, 2014 at 7:35 am #110557
    Lauren @ OnceCoupled
    Member

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


    We create mobile-first, PageSpeed-optimized, pixel-perfect custom themes! https://www.oncecoupled.com

    June 19, 2014 at 7:41 am #110559
    Porter
    Participant

    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?


    Buy me a beer? | Try DigitalOcean VPS Hosting

    June 19, 2014 at 11:10 am #110581
    Lauren @ OnceCoupled
    Member

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


    We create mobile-first, PageSpeed-optimized, pixel-perfect custom themes! https://www.oncecoupled.com

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘Design Tips and Tricks’ is closed to new topics and replies.

CTA

Ready to get started? Create a site or shop for themes.

Create a site with WP EngineShop for Themes

Footer

StudioPress

© 2023 WPEngine, Inc.

Products
  • Create a Site with WP Engine
  • Shop for Themes
  • Theme Features
  • Get Started
  • Showcase
Company
  • Brand Assets
  • Terms of Service
  • Accptable Usse Policy
  • Privacy Policy
  • Refund Policy
  • Contact Us
Community
  • Find Developers
  • Forums
  • Facebook Group
  • #GenesisWP
  • Showcase
Resources
  • StudioPress Blog
  • Help & Documentation
  • FAQs
  • Code Snippets
  • Affiliates
Connect
  • StudioPress Live
  • StudioPress FM
  • Facebook
  • Twitter
  • Dribbble