• 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

Altitude Pro – Using widgets on home page – Rendering issue

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 › Altitude Pro – Using widgets on home page – Rendering issue

This topic is: not resolved

Tagged: Altitude Pro, home page, widgets

  • This topic has 4 replies, 3 voices, and was last updated 7 years, 9 months ago by Wolverine.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • September 20, 2017 at 3:13 pm #211675
    Wolverine
    Member

    I want to use the parallax style home page, but use sidebar widgets as well.

    Studiopress support told me to remove this code from the front-page.php file.

    // Force full width content layout.
    add_filter( 'genesis_site_layout', '__genesis_return_full_width_content' );

    I did, I got widgets, but the page isn't rendering properly. There a dead, blank/white area in the middle of the page now. They guess it's now a CSS issue. And the widgets don't show up on an Android phone. And the menu is cut-off. Seems like the home page lost it's responsiveness.

    I'm using the latest version of Altitude Pro and Genesis.

    Any ideas would be very much appreciated.

    http://www.speedysites.net/test/uadd/
    September 20, 2017 at 5:11 pm #211682
    Erika
    Participant

    Hi Wolverine,

    Unfortunately I'm not seeing the blank white area. Maybe you are viewing a cached version of the page?

    September 20, 2017 at 6:58 pm #211687
    Wolverine
    Member

    Very strange. In an Edge browser, 24" monitor, it's fine, but the widgets don't show up. In Chrome Version 60.0.3112.113 I see the white space and widgets - maybe cached.

    Screenshot - http://www.speedysites.net/test/uadd/wp-content/uploads/home-ss.png

    On other computers, in Chrome and Firefox, it's fine, but the widgets don't show up.

    Do you see widgets?

    September 21, 2017 at 10:42 am #211710
    Victor Font
    Moderator

    The front-page CSS is setup for a full width page. It was never designed for use with a sidebar. That's why it's not rendering properly. You basically have to create all new CSS for the front page. Because you changed the layout, the content area and sidebar are using the following CSS:

    .front-page .site-container .site-inner {
        margin-top: 0;
        max-width: 100%;
    }
    
    .content {
        float: left;
        width: 700px;
    }
    
    .sidebar {
        float: right;
        width: 360px;
    }

    This is what's leaving the gap in the middle. The max-width of the home page is still set at 100% of the screen's width. The content is 700px and the sidebar is 360px. Together they require at least 1060px to display side-by-side. Because they are floated left and right respectively, the gap is in the middle. The gap is the screen's width - 1060px. My MacBook Pro has a screen width of 1440px. The gap is exactly 380px. Change the max-width in the first CSS block and you'll bring the two areas closer together.

    You've probably got a lot more to change as well before it will look good. I suggest you learn how to use your browser's inspect tool to see the impacted CSS: https://victorfont.com/how-to-use-your-browsers-inspect-tool/


    Regards,

    Victor
    https://victorfont.com/
    Call us toll free: 844-VIC-FONT (842-3668)
    Have you requested your free website audit yet?

    September 21, 2017 at 7:51 pm #211732
    Wolverine
    Member

    Victor,

    Thank you very much, That closed the gap! Appreciate it.

    I am a little familiar with the inspect tool. Not as much as I wish. Thanks for the link. Impressed with your Bio.!

    It looks like the only thing left to do is fix the header area so it doesn't cut-off the menu.

  • Author
    Posts
Viewing 5 posts - 1 through 5 (of 5 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

© 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