• 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

Sidebar drops to bottom

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 › General Discussion › Sidebar drops to bottom

This topic is: resolved

Tagged: Sidebar

  • This topic has 4 replies, 2 voices, and was last updated 10 years, 9 months ago by realestateradio.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • September 3, 2014 at 3:40 pm #122666
    realestateradio
    Member

    when viewing my site on a Windows Tablet at 1920x1080 the sidebar is dropping to the bottom.
    If I want to change either the content body width or sidebar width for correct viewing on a tablet.

    so my question is what what do I change and in what section in css is for the tablet view? to look correct

    I looks great on my Lenovo yoga @ laptop, 1920x1080 and higher

    see http://realestateradioshow.com on a tablet 🙂

    Thanks for any help you guys and guys can offer 🙂

    http://realestateradioshow.com
    September 4, 2014 at 9:39 am #122771
    jbergen
    Member

    Hi,

    One way to fix this is to change the widths of the content and sidebar to percentages rather than px widths.

    I changed the content to width: 68.2778%; and sidebar to width: 27.0833%; and the sidebar stopped dropping to the bottom at 1200px wide.

    style.css, line 1612:

    .sidebar-primary {
        width: 27.0833%;
    }

    style.css, line 1607:

    .content {
        width: 68.2778%;
    }

    Now the columns will shrink slightly as the browser gets narrower, and the sidebar will go below the content at screen widths <= 960px.

    I hope that helps!
    Jamie


    Jamie @ Ladebug Studios

    September 4, 2014 at 9:08 pm #122855
    realestateradio
    Member

    That worked great, ran into a little problem, well 2

    1)the content text is right up against the edge of screen when I shrink browser window. can I force it to stay away from left side say 50px ?

    2)second is how hard is it to tell the sidebar to disappear when menu becomes hamburger

    September 4, 2014 at 9:28 pm #122858
    jbergen
    Member

    1) To move the content text away from the left edge, you can change padding-left to 40px. I chose 40px because that's the amount of padding on the right side of the content block.

    style.css, line 474 (change last line):

    .content-sidebar .content {
        border-left: medium none;
        float: left;
        padding-left: 40px;
    }

    If you only want this to happen in smaller browsers, you can instead add this rule to the appropriate media query.

    2) It looks like your menu goes to hamburger at a browser width of 1200 px wide. If you really want your sidebar to disappear, you can add display: none; to that media query. You'll also want to tell the content area to be 100% to fill the width of the screen:

    style.css, line 1630 (add the last two rules):

    @media only screen and (max-width: 1200px) {
    
        #responsive-menu-icon {
            margin-top: 20px;
        }
    
        #menu-main-nav {
            margin-bottom: 20px;
        }
    	
        .sidebar-primary {
            display: none;
        }
    
        .content {
            width: 100%;
        }
    	
    }

    If you simply want your sidebar to display below the content (and not disappear), you can change it to width: 100%; in the media query for 1200px:

    Jamie


    Jamie @ Ladebug Studios

    September 4, 2014 at 10:30 pm #122868
    realestateradio
    Member

    Fantastic, your on my birthday list 🙂

  • Author
    Posts
Viewing 5 posts - 1 through 5 (of 5 total)
  • The forum ‘General Discussion’ 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

© 2025 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