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

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

Home Forums Support Help creating a better home page (Mellow + Elementor)

Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • #1538135
    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.

    #1538163
    Elvin
    Staff
    Customer Support

    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.

    A wise man once said:
    "Have you cleared your cache?"

    #1538185
    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?

    #1538225
    Elvin
    Staff
    Customer Support

    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.

    A wise man once said:
    "Have you cleared your cache?"

    #1538230
    Matt

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

    #1538233
    Elvin
    Staff
    Customer Support

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

    No problem. πŸ™‚

    A wise man once said:
    "Have you cleared your cache?"

    #1538260
    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!

    #1538286
    Elvin
    Staff
    Customer Support

    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. πŸ™‚

    A wise man once said:
    "Have you cleared your cache?"

    #1539200
    Matt

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

    #1539365
    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?

    #1540326
    Tom
    Lead Developer
    Lead Developer

    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.

    #1540334
    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?

    #1540560
    Leo
    Staff
    Customer Support

    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 πŸ™‚

    #1542788
    Matt

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

    Thanks, yet again, Leo and team!

    #1543032
    Leo
    Staff
    Customer Support
Viewing 15 posts - 1 through 15 (of 15 total)
  • You must be logged in to reply to this topic.