[Resolved] Right Sidebar Alignment Issue when Left Sidebar is Empty

Home Forums Support [Resolved] Right Sidebar Alignment Issue when Left Sidebar is Empty

Home Forums Support Right Sidebar Alignment Issue when Left Sidebar is Empty

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #612943
    Rafi

    hi,
    i have an issue very simmilair to this :
    i am using the latest GP AND GPP + latest WOOCOMMERCE . with 25% / 50% / 25% ( 25 FOR SIDEBARS)
    i am using the left sidebar for the ‘cart’ and It displays products only if there are products in the cart.
    i’ve noticed that only on a portable / laptop screen
    i am testing on a laptop – if the left sidebar is empty the right sidebar goes under the content area and i can’t realy understand what to change for this and why is it only on the laptop screen.
    i am not sure but i cant fix the float because it impacts the desktop sceeens.

    what should i do ?
    Thnaks

    GeneratePress 2.1.2
    GP Premium 1.6.2
    #613011
    Leo
    Staff
    Customer Support

    Hi there,

    Not quite sure if I’m understanding the problem.

    I think I see the correct layout for a second when I load the page but then it jumps to a weird layout.

    Can you do the following test:
    – I see the you’ve added lots of CSS for WooCommerce, can you comment then out and see if the problem still exist?

    – If not then can you try #1 here and make sure this isn’t causing by another plugin?
    https://docs.generatepress.com/article/debugging-tips/

    #613104
    Rafi

    i have tried what you have suggested thanks but unfortunately with no success.
    i’ve found that this position property code from the unsemantic-grid.min.css causes this issue .
    i’ve added this to my css file :
    .grid-10, .grid-15, .grid-20, .grid-25, .grid-30, .grid-33, .grid-35, .grid-40, .grid-45, .grid-5, .grid-50, .grid-60, .grid-65, .grid-66, .grid-70, .grid-75, .grid-80, .grid-85, .grid-90, .grid-95 {
    position: static;
    }
    the page content is still aligned to the left instead of to the right. it seems better now.
    is there a rule or a script that can align it to the center of the page as if the left sidebar is not empty ?

    #613577
    Tom
    Lead Developer
    Lead Developer

    It looks like everything is centered now? Did you figure it out?

    Let me know 🙂

    #615342
    Rafi

    Hi,

    i think i have found a solution.

    i have found for some reason only throught Microsoft Edge Inspect couldn’t dig it in chrome browser
    its a line in a minified css file:
    generatepress/css/unsemantic-grid.min.css?ver=2.1.3
    under the property :
    .clearfix::after, .clearfix::before, .grid-100::after, .grid-100::before, .grid-10::after, .grid-10::before, .grid-15::after, .grid-15::before, .grid-20::after, .grid-20::before, .grid-25::after, .grid-25::before, .grid-30::after, .grid-30::before, .grid-33::after, .grid-33::before, .grid-35::after, .grid-35::before, .grid-40::after, .grid-40::before, .grid-45::after, .grid-45::before, .grid-50::after, .grid-50::before, .grid-55::after, .grid-55::before, .grid-5::after, .grid-5::before, .grid-60::after, .grid-60::before, .grid-65::after, .grid-65::before, .grid-66::after, .grid-66::before, .grid-70::after, .grid-70::before, .grid-75::after, .grid-75::before, .grid-80::after, .grid-80::before, .grid-85::after, .grid-85::before, .grid-90::after, .grid-90::before, .grid-95::after, .grid-95::before, .grid-container::after, .grid-container::before, [class*=mobile-grid-]::after, [class*=mobile-grid-]::before, [class*=tablet-grid-]::after, [class*=tablet-grid-]::before
    the element :DISPLAY: BLOCK
    i have changed it to: display : inline;
    and it seems to work fine now.
    i just don’t know how it worked fine for more than a month and suddenly it got a bug.

    i am running this in the custom css for a few days for testing.

    #615723
    Tom
    Lead Developer
    Lead Developer

    That’s likely not a good solution, as you’d have to alter it after every theme update, and it might cause issues in other browsers.

    Any chance I can see the issue happening? I might have another solution 🙂

    #615823
    Rafi

    yahh sure. Its back 🙂 i’ve relayed it from the custom css file.

    Thnaks and a great profile picture

    #616304
    Tom
    Lead Developer
    Lead Developer

    Are you using a plugin to hide the widget if the cart is empty? It would be better to use visibility or opacity instead of display: none.

    #616466
    Rafi

    I’ve tried all of that.
    I am using the addon plugin from the creator of woocomerce with no frontend styles or css yet.

    #616838
    Tom
    Lead Developer
    Lead Developer

    Try adding this CSS:

    .inside-left-sidebar {
        min-height: 100px;
    }
    #622964
    Rafi

    its working perfect! thanks a lot 🙂

    #622976
    Tom
    Lead Developer
    Lead Developer
Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.