Altitude Pro – Using widgets on home page – Rendering issue

[Wolverine]

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/

[Erika]

Hi Wolverine,

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

[Wolverine]

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?

[Victor Font]

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?

[Wolverine]

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