woo-commerce shop mobile page not correctly displaying

  • jsmundey

    (@jsmundey)


    2 years, 7 months ago

    Hi there,

    Botiga is pretty good. There are few things which require fix.
    – home page, when viewed in mobile form-factor, shows one product per row which is good. but when moving to shop or product category, it’s showing two products in a row which is kind of cramped. how can this be configured so that it’s consistent with home page mobile view of a product/item?
    – when using product category block (gutenberg) on a page, the shop button sits right after category name, so multiple categories in a column shows buttons at different levels. Not sure how to align that since there was no option shown.
    – product category block (gutenberg editor) font size is pretty big and does not show a way to customize. same goes for woocommerce shop page when choosing to show category and products, the category titles are pretty huge comparing to product titles.

    • This topic was modified 2 years, 7 months ago by jsmundey.
Viewing 3 replies - 1 through 3 (of 3 total)
  • Rodrigo Teixeira

    (@maaprote)

    2 years, 7 months ago

    Hello,

    First thanks for using Botiga!

    1. Really this is something that maybe we should improve. I will discuss with our development team about that. For now, you can add the given custom CSS code below at Appearance > Customize > Additional CSS:

    @media screen and (max-width: 575px) {
    ul.products li.product {
        width: 100%;
    }
}

    2. Sorry but I couldn’t reproduce that issue here. Could you please share your website URL/link ? So we can do a inspection and see what’s happening.

    3. Really, these issues are present and we will fix that for the next version of the theme. For now, please send you website link/URL so we can send a custom CSS code that should fix these issues until the new version of the theme is released.

    Hope this helps!

    Kind Regards,

    Rodrigo.

    Thread Starter jsmundey

    (@jsmundey)

    2 years, 7 months ago

    Hi Rodrigo,

    Thank you for quick response.

    Sorry at the moment, i am doing all setup on a local computer and don’t have a public site yet. I’ll be happy to share once i upload online.

    1. This fix worked after adding Additional CSS.

    For 2. and 3. attaching screenshot link https://ufile.io/f/r5a0g

    4. another thing i faced, when trying to edit text on any columns/text in footer, it’s just jumping from one format to another. (attached shot)

    Best,
    Jagtar

    Rodrigo Teixeira

    (@maaprote)

    2 years, 7 months ago

    Hello Jagatar,

    No worries!

    1. Great!

    2.1 Footer no clickable – I couldn’t reproduce this issue here. It’s working normally. Probably there’s some plugin conflict or something. Please try keeping only the Botiga theme related plugins enabled and try again. The plugins are: Woocommerce, Contact Form 7, aThemes Starters and aThemes Blocks. Let me know how it goes.

    2.2 Featured Categories – That’s the default behavior of this block component. At really it is a WooCommerce block (from woocommerce plugin). You can try reducing the font-size and reducing the space in both sides of the title. Maybe with this custom CSS code at Appearance > Customize > Additional CSS 

    .wc-block-featured-category__title {
    font-size: 26px;
    padding-left: 10px !important;
    padding-right: 10px !important;
}

    3. Categories title big – Try adding this custom CSS code to reduce the font size:

    .woocommerce-loop-category__title {
    font-size: 1rem;
}

    Hope this helps!

    Kind Regards,

    Rodrigo.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘woo-commerce shop mobile page not correctly displaying’ is closed to new replies.