Home Forums Exoplanet Products(shop) page not scrolling when in full screen mode

Tagged: 

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #7581
    flexedlimbarchery
    Participant

    I am using Exoplanet as the theme for my WooCommerce shop and I’m having a problem where the product catalog pages and the product pages do not scroll when the window is maximized. It works perfectly on mobile or tablet or when window is resized to be half screen. I have ensured that this is a theme issue by disabling all plugins as well as trying other themes and they problem seems to only occur using this theme. I like this theme quite a bit so I would rather not have to switch themes to fix this problem. If anyone could help me with this it would be greatly appreciated. Thank You!

     

    P.S.

    The page that this is happening on is https://www.flexedlimbarchery.com/products

    #7583
    Andy
    Keymaster

    There are no products on your product page and no product categories for me to take a look at.

    As there are no products, the page content does not have enough height for a scrollbar to appear, and thus I am unable to scroll when the browser window is full screen.

    Hope I have understood the issue you described. Please provide more information if I am mistaken.

    #7584
    Andy
    Keymaster

    Okay, I have worked out why the page won’t scroll.

    You have added some of your own custom CSS, specifically this line:
    .woocommerce { overflow: hidden;}

    This is causing the scrollbar to never appear on screen widths wider than 981px (on pages containing woocommerce elements such as the shop/products pages) because it is also wrapped within a @media rule like so:

    /* 2 column layout */
    @media (min-width: 981px) {
    .woocommerce { overflow: hidden;}
    .woocommerce:after { clear: both; }
    .woocommerce .col2-set .col-1, .woocommerce-page .col2-set .col-1 { width: 100%; }
    .woocommerce .col2-set .col-2, .woocommerce-page .col2-set .col-2 { display: none; }
    .woocommerce .col2-set, .woocommerce-page .col2-set { float:left; width: 48%; }
    #order_review_heading, .woocommerce #order_review, .woocommerce-page #order_review { 
    float: left; 
    width:48%; 
    margin-left: 4%; 
    }
    }

    I don’t know why that line would be needed but you can remove it and then it should work properly.

    #7586
    flexedlimbarchery
    Participant

    Thank you so much for your help Andy! That worked wonderfully!

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.