Trying to achieve single stack in Shop Layout View for mobile

This topic has 2 replies, 2 voices, and was last updated 2 months, 3 weeks ago ago by Tony Rodriguez

  • Avatar: sethr
    sethr
    Participant
    December 6, 2023 at 23:46

    I did find forum posts asking for same thing… like: https://www.8theme.com/topic/shop-page-layout-on-mobile-is-not-stacking-elements/

    But pasting that global CSS in did not seem to do the trick.

    I am looking for solution to get my Shop Page Layout on Mobile to show a SINGLE COLUMN of stacked products (not double column as it currently is functioning).

    Have there been any improvements to the theme to allow this and I am just missing it? Or do I need custom CSS and i’m just not applying correctly?

    Currently i’ve tried in theme custom css > global:

    @media only screen and (max-width: 992px) {
    				.cart-checkout-multistep.cart-checkout-light-header .header-wrapper .et_b_header-logo {
    				display: none;
    		}
    }

    Currently i’ve tried in theme custom css > Tablet and Mobile:

    .products-list .content-product .quantity-wrapper {
        width: 100% !important;
        justify-content: center;
    }

    Thank you in advance for assistance.

    1 Answer
    Avatar: Tony Rodriguez
    Tony Rodriguez
    Support staff
    December 7, 2023 at 10:03

    Hello, @sethr,

    We are delighted to inform you that our XStore theme includes features that enable you to construct a Product Archive. To do so, kindly adhere to the instructions below:

    1. Access the WordPress dashboard.
    2. Navigate to ‘XStore Builder’ and select ‘Product Archive’.
    3. Proceed to edit the Product Archive.
    4. While in Edit mode, begin by copying the section you intend to replicate.
    5. Within the copied section, make the necessary adjustments to the Archive products and General settings, ensuring that the columns are configured to meet your specifications.
    6. Verify the responsiveness of the Elementor, particularly in the mobile view, to ensure optimal display.
    7. Once you have fine-tuned the settings, highlight the entire section.
    8. Move to the ‘Advanced’ options, select ‘Responsive’, and opt to conceal the section on Desktop devices. This will ensure that the section is exclusively visible on Mobile devices.
    9. When updating, include a condition to define the specific locations where the Product Archive should be displayed, such as on the shop page.

    For a comprehensive visual walkthrough, please consult the images provided at the following links:
    https://imgur.com/a/FXPjaqT
    https://imgur.com/a/wWQqg9k
    https://imgur.com/a/RKZ8Wx7
    https://imgur.com/a/bNxLLoc

    We also recommend reviewing the XStore theme documentation for additional insights. The documentation is accessible via this link:
    https://xstore.helpscoutdocs.com/article/191-xstore-products-archive-builder-with-elementor

    Following these guidelines will enable you to tailor the Product Archive section to your preferences and guarantee its responsive functionality across various devices.

    Yours sincerely,
    The 8Themes Team

  • Viewing 2 results - 1 through 2 (of 2 total)

The issue related to '‘Trying to achieve single stack in Shop Layout View for mobile’' has been successfully resolved, and the topic is now closed for further responses

We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.