[Resolved] Help creating a better home page (Mellow + Elementor)

[Matt]

Hi there,

I’ve changed my home page (Mellow theme) to instead be a static page, that I’ve created as a Page. I use Elementor Pro to build. But, I don’t feel as though as I have as much flexibility in creating a beautiful home page as I’d like.

The main issue is the huge Left and Right sidebars. I’d love for the main container to take up way more of the screen, but even after setting Sidebar widths as low as possible, I just can’t seem to tap into that territory. I’ve included a screenshot of what I mean below.

I love the designs of my posts, because I tap into that left sidebar for a ToC. But on the home page, would prefer no side bar. Even so, I can’t get around the dead space.

At this point, I’m thinking I made a mistake by choosing the Mellow team and not one that’s more affiliate-friendly. But I feel I’m in too deep to switch themes and risk breaking my site completely.

Any help much appreciated – apologies if my thoughts are scatterbrained / unclear.

[Elvin]

Hi,

I believe this particular CSS found in your site’s Appearance > Customize > Additional CSS is the dead space you’re pertaining to.

.no-sidebar:not(.generate-columns-activated) .inside-article > *, .no-sidebar #comments {
                max-width: 700px;
                margin-left: auto;
                margin-right: auto;
            }

max-width: 700px; limits the width of the content, causing the white dead space on larger screens. Removing the max-width property or changing its value to a higher one should address this.

[Matt]

Cool, thank you. So if I only want to make this change to the one specific Page, and not all my other posts, where would I edit that CSS?

[Elvin]

Cool, thank you. So if I only want to make this change to the one specific Page, and not all my other posts, where would I edit that CSS?

There are multiple ways of doing this.

One is to create a Hook Element that contains this code:
<style>
.no-sidebar:not(.generate-columns-activated) .inside-article > *, .no-sidebar #comments {
max-width: 700px;
margin-left: auto;
margin-right: auto;
}
</style>
Set the hook to wp_head, and then set the display rule location to specified pages.

More about Hook element here.
https://docs.generatepress.com/article/hooks-element-overview/

And since you’re using Elementor, Another way is by adding the same <style> code provided above to an HTML widget within your page’s content.

[Matt]

Ahhh, how could I forget about the hook element! Thank you so much!

[Elvin]

Ahhh, how could I forget about the hook element! Thank you so much!

No problem. 🙂

[Matt]

Hey man,

I tried adding that code as both a hook and an Elementor html block, but neither did the trick.

To clarify, I’ve attached a screenshot of one website I like (whose content takes up the full width of a browser window) and my own, where the sidebars are huge. I’m not able to add any on-page Elementor elements beyond the width that I’m currently at. It’s just not usable space.

I was hoping the above <style> stuff would allow me to “unlock” these sidebars and take up more space on screen, but I can’t seem to get that to work.

Any thoughts, with all that clarification mind?
Thanks!

[Elvin]

Oh right, I forgot to mention you must change max-width: 700px; value to your preferred page width.

If you want to make the content occupy the whole content container, you can set it to max-width: 100%;

Note: If you want to remove this on all of the pages, go to Appearance > Customize > Additional CSS and remove the code there. That’s actually the main culprit to this issue. 🙂

[Matt]

Legend. Your whole team is legends. Please tell me how I can send you all Christmas gifts! <3

[Matt]

Hey there,

The above fixed the problem in question, BUT I think it somehow may have reverted a change a while back. Previously, Leo had me put that code in to hide my ToC on mobile.

On desktop, I wanted my ToC to float. But on mobile, I wanted to remove it completely. (It’s in the left sidebar).

I’m not certain this is what is causing the issue, but now on mobile, my ToC is at the very bottom of my posts.

Any ideas?

[Tom]

Hi there,

Is there somewhere we can see the issue? I can’t see how the above CSS would affect that, but we’ll be happy to take a look.

[Matt]

Yep – link to my site provided privately.

I also don’t see how that code could cause the issue … maybe it’s from me tinkering with the width settings in the Elements panel?

[Leo]

Are you referring to this CSS here?
https://generatepress.com/forums/topic/need-help-making-left-sidebar-sticky/page/2/#post-1425851

It was never meant to hide it on mobile – it simply makes it so it’s only sticky on desktop.

Try this CSS if you want to hide the left sidebar on mobile:

@media (max-width: 768px) {
    .is-left-sidebar.sidebar {
        display: none;
    }
}

Let me know if this helps 🙂

[Matt]

Oh, wow, oops! I wonder how long I had it there :flushed:

Thanks, yet again, Leo and team!

[Leo]

No problem 🙂

[Author]

Posts