Support » Theme: Storefront » How to make Storefront mobile site 2 columns for categories to show

  • Resolved gianlucat90

    (@gianlucat90)


    Hello,

    i using storefront theme, in desktop all categories show perfect, but in mobile site it shows only one column one category in home page and store page, so how to show 2 categories per column in mobile site?

    Thanks for the help

    The page I need help with: [log in to see the link]

Viewing 9 replies - 1 through 9 (of 9 total)
  • Jarret

    (@jarretc)

    Hi, which code are you using to display those categories in the editing screen of the admin dashboard?

    gianlucat90

    (@gianlucat90)

    Hi Jarret,
    I’m using this short code on a block in the homepage: [product_categories limit=”12″ columns=”4″ orderby=”menu_order”]

    Thanks

    Jarret

    (@jarretc)

    Thanks, you could try something like this

    @media screen and (max-width: 500px) {
      .entry-content .woocommerce .products li {
        width: 50%;
        float: left;
      }
    }

    Though not thoroughly tested across multiple devices so your mileage may vary.

    gianlucat90

    (@gianlucat90)

    Thank you!

    Hello,
    unfortunately with the last updates that code is not working anymore.
    Now on Safari for iphone I see again one column, one category.
    Can I try something to resolve this?
    Thank you!

    Hello again, are you referring to the images under the ‘Выбери модель своего iPhone’ heading for the different iPhone models? When viewing the site on my iPhone 7 in Safari, those icons are in 2 columns with iPhone 7/8 being on a row by itself.

    Do you have a screenshot you can upload to https://snipboard.io showing what you’re seeing?

    Hello and thanks for your prompt reply!
    Sorry I was not clear, the error is in the category page of the shop: https://inaturestore.ru/shop/

    Thanks again

    This should get it back into having them as 2 columns

    @media screen and (max-width: 500px) {
      .post-type-archive-product .site-main .products .product {
        float: left;
        width: 50%;
      }
    }

    Thank you for the awesome support!

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