• Resolved devildad

    (@devildad)


    Related products and Category products not showing 2 in a row on mobile.

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

Viewing 15 replies - 1 through 15 (of 15 total)
  • Hi @devildad!

    Related products and Category products not showing 2 in a row on mobile.

    Are you referring to the Categories section on your home page? I do see that this collapses to one column on mobile.

    If this is what you’re referring to, this is most likely going to be a theme configuration or customization issue, but we might be able to help you configure it.

    Can you send us your system status report? You can find that by going to WooCommerce > Status in your site’s admin area, then clicking “Get system report,” then “Copy for support.”

    Thanks!

    Thread Starter devildad

    (@devildad)

    
    ### WordPress Environment ###
    
    WordPress address (URL): https://topupghorbd.com
    Site address (URL): https://topupghorbd.com
    WC Version: 6.1.1
    REST API Version: ✔ 6.1.1
    WC Blocks Version: ✔ 6.5.2
    Action Scheduler Version: ✔ 3.4.0
    WC Admin Version: ✔ 3.0.3
    Log Directory Writable: ✔
    WP Version: ❌ 5.8.3 - There is a newer version of WordPress available (5.9)
    WP Multisite: –
    WP Memory Limit: 1 GB
    WP Debug Mode: –
    WP Cron: ✔
    Language: en_US
    External object cache: –
    
    ### Server Environment ###
    
    Server Info: LiteSpeed
    PHP Version: 7.4.27
    PHP Post Max Size: 1 GB
    PHP Time Limit: 1500
    PHP Max Input Vars: 2000
    cURL Version: 7.71.0
    OpenSSL/1.1.1d
    
    SUHOSIN Installed: –
    MySQL Version: 5.5.5-10.3.32-MariaDB-log-cll-lve
    Max Upload Size: 1 GB
    Default Timezone is UTC: ✔
    fsockopen/cURL: ✔
    SoapClient: ✔
    DOMDocument: ✔
    GZip: ✔
    Multibyte String: ✔
    Remote Post: ✔
    Remote Get: ✔
    
    ### Database ###
    
    WC Database Version: 6.1.1
    WC Database Prefix: wpuf_
    Total Database Size: 53.36MB
    Database Data Size: 42.47MB
    Database Index Size: 10.89MB
    wpuf_woocommerce_sessions: Data: 6.99MB + Index: 0.36MB + Engine MyISAM
    wpuf_woocommerce_api_keys: Data: 0.00MB + Index: 0.00MB + Engine MyISAM
    wpuf_woocommerce_attribute_taxonomies: Data: 0.00MB + Index: 0.00MB + Engine MyISAM
    wpuf_woocommerce_downloadable_product_permissions: Data: 0.00MB + Index: 0.00MB + Engine MyISAM
    wpuf_woocommerce_order_items: Data: 0.15MB + Index: 0.07MB + Engine MyISAM
    wpuf_woocommerce_order_itemmeta: Data: 1.71MB + Index: 1.13MB + Engine MyISAM
    wpuf_woocommerce_tax_rates: Data: 0.00MB + Index: 0.00MB + Engine MyISAM
    wpuf_woocommerce_tax_rate_locations: Data: 0.00MB + Index: 0.00MB + Engine MyISAM
    wpuf_woocommerce_shipping_zones: Data: 0.00MB + Index: 0.00MB + Engine MyISAM
    wpuf_woocommerce_shipping_zone_locations: Data: 0.00MB + Index: 0.00MB + Engine MyISAM
    wpuf_woocommerce_shipping_zone_methods: Data: 0.00MB + Index: 0.00MB + Engine MyISAM
    wpuf_woocommerce_payment_tokens: Data: 0.00MB + Index: 0.00MB + Engine MyISAM
    wpuf_woocommerce_payment_tokenmeta: Data: 0.00MB + Index: 0.00MB + Engine MyISAM
    wpuf_woocommerce_log: Data: 0.00MB + Index: 0.00MB + Engine MyISAM
    wpuf_actionscheduler_actions: Data: 1.11MB + Index: 0.58MB + Engine MyISAM
    wpuf_actionscheduler_claims: Data: 0.00MB + Index: 0.00MB + Engine MyISAM
    wpuf_actionscheduler_groups: Data: 0.00MB + Index: 0.01MB + Engine MyISAM
    wpuf_actionscheduler_logs: Data: 0.82MB + Index: 0.55MB + Engine MyISAM
    wpuf_adminify_page_speed: Data: 0.00MB + Index: 0.00MB + Engine MyISAM
    wpuf_aelia_dismissed_messages: Data: 0.00MB + Index: 0.00MB + Engine MyISAM
    wpuf_commentmeta: Data: 0.04MB + Index: 0.02MB + Engine MyISAM
    wpuf_comments: Data: 0.83MB + Index: 0.37MB + Engine MyISAM
    wpuf_fa_user_logins: Data: 1.49MB + Index: 1.11MB + Engine MyISAM
    wpuf_frmt_form_entry: Data: 0.00MB + Index: 0.01MB + Engine MyISAM
    wpuf_frmt_form_entry_meta: Data: 0.01MB + Index: 0.02MB + Engine MyISAM
    wpuf_frmt_form_views: Data: 0.00MB + Index: 0.02MB + Engine MyISAM
    wpuf_glsr_assigned_posts: Data: 0.02MB + Index: 0.00MB + Engine InnoDB
    wpuf_glsr_assigned_terms: Data: 0.02MB + Index: 0.00MB + Engine InnoDB
    wpuf_glsr_assigned_users: Data: 0.02MB + Index: 0.00MB + Engine InnoDB
    wpuf_glsr_ratings: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
    wpuf_links: Data: 0.00MB + Index: 0.00MB + Engine MyISAM
    wpuf_litespeed_img_optm: Data: 0.03MB + Index: 0.02MB + Engine MyISAM
    wpuf_litespeed_img_optming: Data: 0.08MB + Index: 0.03MB + Engine MyISAM
    wpuf_lmfwc_api_keys: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
    wpuf_lmfwc_generators: Data: 0.02MB + Index: 0.00MB + Engine InnoDB
    wpuf_lmfwc_licenses: Data: 0.08MB + Index: 0.00MB + Engine InnoDB
    wpuf_lmfwc_licenses_meta: Data: 0.02MB + Index: 0.00MB + Engine InnoDB
    wpuf_nextend2_image_storage: Data: 0.00MB + Index: 0.00MB + Engine MyISAM
    wpuf_nextend2_section_storage: Data: 0.01MB + Index: 0.01MB + Engine MyISAM
    wpuf_nextend2_smartslider3_generators: Data: 0.00MB + Index: 0.00MB + Engine MyISAM
    wpuf_nextend2_smartslider3_sliders: Data: 0.03MB + Index: 0.00MB + Engine MyISAM
    wpuf_nextend2_smartslider3_sliders_xref: Data: 0.00MB + Index: 0.00MB + Engine MyISAM
    wpuf_nextend2_smartslider3_slides: Data: 0.03MB + Index: 0.01MB + Engine MyISAM
    wpuf_nm_personalized: Data: 0.01MB + Index: 0.00MB + Engine MyISAM
    wpuf_options: Data: 4.95MB + Index: 0.31MB + Engine MyISAM
    wpuf_postmeta: Data: 17.04MB + Index: 4.38MB + Engine MyISAM
    wpuf_posts: Data: 4.52MB + Index: 0.35MB + Engine MyISAM
    wpuf_reviewx_criterias: Data: 0.00MB + Index: 0.00MB + Engine MyISAM
    wpuf_reviewx_import_history: Data: 0.00MB + Index: 0.00MB + Engine MyISAM
    wpuf_reviewx_process_jobs: Data: 0.00MB + Index: 0.00MB + Engine MyISAM
    wpuf_reviewx_reminder_email: Data: 0.00MB + Index: 0.00MB + Engine MyISAM
    wpuf_sgpb_subscribers: Data: 0.00MB + Index: 0.00MB + Engine MyISAM
    wpuf_sgpb_subscription_error_log: Data: 0.00MB + Index: 0.00MB + Engine MyISAM
    wpuf_termmeta: Data: 0.02MB + Index: 0.02MB + Engine MyISAM
    wpuf_terms: Data: 0.01MB + Index: 0.03MB + Engine MyISAM
    wpuf_term_relationships: Data: 0.01MB + Index: 0.02MB + Engine MyISAM
    wpuf_term_taxonomy: Data: 0.01MB + Index: 0.02MB + Engine MyISAM
    wpuf_usermeta: Data: 1.09MB + Index: 0.53MB + Engine MyISAM
    wpuf_users: Data: 0.05MB + Index: 0.04MB + Engine MyISAM
    wpuf_wcpdf_invoice_number: Data: 0.03MB + Index: 0.02MB + Engine MyISAM
    wpuf_wc_admin_notes: Data: 0.02MB + Index: 0.00MB + Engine MyISAM
    wpuf_wc_admin_note_actions: Data: 0.01MB + Index: 0.00MB + Engine MyISAM
    wpuf_wc_category_lookup: Data: 0.00MB + Index: 0.00MB + Engine MyISAM
    wpuf_wc_customer_lookup: Data: 0.02MB + Index: 0.02MB + Engine MyISAM
    wpuf_wc_download_log: Data: 0.00MB + Index: 0.00MB + Engine MyISAM
    wpuf_wc_order_coupon_lookup: Data: 0.00MB + Index: 0.00MB + Engine MyISAM
    wpuf_wc_order_product_lookup: Data: 0.20MB + Index: 0.18MB + Engine MyISAM
    wpuf_wc_order_stats: Data: 0.16MB + Index: 0.11MB + Engine MyISAM
    wpuf_wc_order_tax_lookup: Data: 0.00MB + Index: 0.00MB + Engine MyISAM
    wpuf_wc_product_meta_lookup: Data: 0.05MB + Index: 0.07MB + Engine MyISAM
    wpuf_wc_rate_limits: Data: 0.00MB + Index: 0.00MB + Engine MyISAM
    wpuf_wc_reserved_stock: Data: 0.00MB + Index: 0.00MB + Engine MyISAM
    wpuf_wc_tax_rate_classes: Data: 0.00MB + Index: 0.01MB + Engine MyISAM
    wpuf_wc_webhooks: Data: 0.00MB + Index: 0.00MB + Engine MyISAM
    wpuf_wmfo_fraud_attempts: Data: 0.00MB + Index: 0.00MB + Engine MyISAM
    wpuf_wmfo_logs: Data: 0.00MB + Index: 0.00MB + Engine MyISAM
    wpuf_woo_wallet_transactions: Data: 0.26MB + Index: 0.08MB + Engine MyISAM
    wpuf_woo_wallet_transaction_meta: Data: 0.09MB + Index: 0.07MB + Engine MyISAM
    wpuf_wpmm_subscribers: Data: 0.00MB + Index: 0.00MB + Engine MyISAM
    wpuf_yith_wcwl: Data: 0.03MB + Index: 0.02MB + Engine MyISAM
    wpuf_yith_wcwl_lists: Data: 0.03MB + Index: 0.03MB + Engine MyISAM
    wpuf_yoast_indexable: Data: 0.27MB + Index: 0.14MB + Engine MyISAM
    wpuf_yoast_indexable_hierarchy: Data: 0.01MB + Index: 0.04MB + Engine MyISAM
    wpuf_yoast_migrations: Data: 0.00MB + Index: 0.01MB + Engine MyISAM
    wpuf_yoast_primary_term: Data: 0.00MB + Index: 0.00MB + Engine MyISAM
    wpuf_yoast_seo_links: Data: 0.03MB + Index: 0.01MB + Engine MyISAM
    
    ### Post Type Counts ###
    
    attachment: 64
    custom_css: 2
    custom_order_status: 2
    customize_changeset: 68
    elementor_library: 1
    elementor-hf: 1
    forminator_forms: 1
    nav_menu_item: 91
    notificationx: 2
    page: 11
    popup: 1
    popup_theme: 8
    popupbuilder: 2
    post: 2
    product: 28
    product_variation: 150
    revision: 754
    shop_order: 2007
    shop_order_refund: 138
    shopengine-template: 1
    wallet_withdrawal: 1
    yay-currency-manage: 2
    yaymail_template: 11
    
    ### Security ###
    
    Secure connection (HTTPS): ✔
    Hide errors from visitors: ✔
    
    ### Active Plugins (46) ###
    
    TPSMS Notifications for WooCommerce: by TPSMS | Powered Tech Panacea Domain Hosting Company – 1.0
    Direct checkout, WooCommerce Single page checkout , WooCommerce One page checkout: by PI Websolution – 2.1.19
    Akismet Anti-Spam: by Automattic – 4.2.2
    All-in-One WP Migration: by ServMask – 7.53
    Autocomplete WooCommerce Orders: by QuadLayers – 1.4.8
    Bangladeshi Payment Gateways: by ultraDevs – 2.0.5
    Cancel order request for WooCommerce: by PI Websolution – 1.2.41
    Payment Gateway Based Fees and Discounts for WooCommerce: by Tyche Softwares – 2.6.4
    Coinbase Commerce: by Coinbase Commerce – 1.1.4
    Custom Order Status for WooCommerce: by Tyche Softwares – 2.0.3
    Customer Reviews for WooCommerce: by CusRev – 4.36
    Elementor: by Elementor.com – 3.6.0-dev17
    Forminator: by WPMU DEV – 1.15.9
    Elementor Header & Footer Builder: by Brainstorm Force
    Nikhil Chavan – 1.6.8
    
    If Menu - Visibility control for menu items: by Layered – 0.16.2
    Insert Headers and Footers: by WPBeginner – 1.6.0
    Jetpack: by Automattic – 10.5.1
    License Manager for WooCommerce: by wpexpertsio – 2.2.5
    Limit Login Attempts Reloaded: by Limit Login Attempts Reloaded – 2.23.2
    Lock User Account: by teknigar – 1.0.3
    OTP Login/Signup Woocommerce Premium: by XootiX – 2.1
    Plugins Garbage Collector (Database Cleanup): by Vladimir Garagulya – 0.12
    Perfect Money: by  – 0.1
    Popup Builder: by Sygnoos – 4.0.8
    Super Socializer: by Team Heateor – 7.13.26
    UpdraftPlus - Backup/Restore: by UpdraftPlus.Com
    DavidAnderson – 1.22.1
    
    User Login History: by Er Faiyaz Alam – 2.1.0
    Webmoney - payment gateway for WooCommerce: by Mofsy – 2.0.1.1
    User Email Verification for WooCommerce: by XLPlugins – 3.5.0
    WooCommerce Custom Product Addons (Free): by Acowebs – 2.5.8
    Variation Swatches for WooCommerce: by Emran Ahmed – 1.1.19
    TeraWallet: by WCBeginner – 1.3.22
    Checkout Fields Manager for WooCommerce: by QuadLayers – 5.5.3
    CURCY - WooCommerce Multi Currency Premium: by VillaTheme – 2.1.25
    WooCommerce PayPal Payments: by WooCommerce – 1.6.4
    WooCommerce PDF Invoices & Packing Slips: by WP Overnight – 2.12.1
    PPOM for WooCommerce by N-MEDIA: by Najeeb Ahmad – 24.2
    WooCommerce: by Automattic – 6.1.1
    WooLentor - WooCommerce Elementor Addons + Builder: by HasThemes – 2.1.7
    Yoast SEO: by Team Yoast – 18.0
    WP Mail SMTP: by WPForms – 3.2.1
    WP Maintenance Mode: by Designmodo – 2.4.2
    WP Rollback: by Impress.org – 1.7.1
    WPS Hide Login: by WPServeur
    NicolasKulka
    wpformation – 1.9.3
    
    YayMail - WooCommerce Email Customizer: by YayCommerce – 2.8.3
    YITH Pre-Order for WooCommerce: by YITH – 1.8.0
    
    ### Inactive Plugins (0) ###
    
    ### Settings ###
    
    API Enabled: –
    Force SSL: –
    Currency: BDT (৳ )
    Currency Position: right
    Thousand Separator: ,
    Decimal Separator: .
    Number of Decimals: 2
    Taxonomies: Product Types: external (external)
    grouped (grouped)
    simple (simple)
    variable (variable)
    
    Taxonomies: Product Visibility: exclude-from-catalog (exclude-from-catalog)
    exclude-from-search (exclude-from-search)
    featured (featured)
    outofstock (outofstock)
    rated-1 (rated-1)
    rated-2 (rated-2)
    rated-3 (rated-3)
    rated-4 (rated-4)
    rated-5 (rated-5)
    
    Connected to WooCommerce.com: –
    
    ### WC Pages ###
    
    Shop base: #6 - /shop/
    Cart: #7 - /cart/
    Checkout: #8 - /checkout/
    My account: #9 - /my-account/
    Terms and conditions: #776 - /terms-and-conditions/
    
    ### Theme ###
    
    Name: Storefront
    Version: 3.9.1
    Author URL: https://woocommerce.com/
    Child Theme: ❌ – If you are modifying WooCommerce on a parent theme that you did not build personally we recommend using a child theme. See: How to create a child theme
    WooCommerce Support: ✔
    
    ### Templates ###
    
    Overrides: –
    
    ### WooCommerce PayPal Payments ###
    
    Onboarded: ✔
    Shop country code: BD
    WooCommerce currency supported: –
    PayPal card processing available in country: –
    Pay Later messaging available in country: –
    Webhook status: –
    Vault enabled: ✔
    Logging enabled: –
    Reference Transactions: –
    Used PayPal Checkout plugin: –
    
    ### Action Scheduler ###
    
    Complete: 3,265
    Oldest: 2021-12-26 08:04:57 +0600
    Newest: 2022-01-26 07:52:15 +0600
    
    Pending: 1
    Oldest: 2022-01-31 14:18:32 +0600
    Newest: 2022-01-31 14:18:32 +0600
    
    ### Status report information ###
    
    Generated at: 2022-01-26 07:58:50 +06:00
    

    https://topupghorbd.com/product-category/pubg-mobile/
    Check this link

    Hi there @devildad

    You said before:

    Related products and Category products not showing 2 in a row on mobile

    I checked the related products section on mobile and yes it’s not in a row (all products in one row).


    Link to image: https://d.pr/i/ka49QA

    On desktop, the related products section placing products in one row:


    Link to image: https://d.pr/i/c3nwVQ

    This is expected due to the mobile responsiveness of the theme.

    If you want that the three products to be in one row on mobile, although I think that would look a bit weird, you can achieve it by using CSS code.

     
    If you’d like to learn more about CSS, I highly recommend using the free tutorials at w3schools. Here, you can find the basics of selectors (how to target the right element on the page), and properties (how to change the element on the page).`

    I hope that helps!

    Thread Starter devildad

    (@devildad)

    How can I change for mobile phone. Now it’s showing 1 but it should show 2

    Hi @devildad!

    Add this CSS code snippet to your site via Appearance > Customize > Additional CSS:

    @media (max-width: 480px) {
    
    ul.products, .wc-block-grid__products {
    	column-count: 2;
     }
    }

    The above code snippet will make all product listings on mobile on your site have two columns.

    I hope this helps!

    • This reply was modified 2 years, 2 months ago by Victor Wilson.
    Thread Starter devildad

    (@devildad)

    Thanks

    Thread Starter devildad

    (@devildad)

    But it always show 2 in desktop. Please help

    Hello @devildad

    I just checked your site on a desktop computer and it displays the products in 4 columns. The products are equally displayed on mobile in 2 columns. Can you clarify where you are still having issues?

    Thanks!

    Thread Starter devildad

    (@devildad)

    Check it
    https://ibb.co/wzKnK49
    https://ibb.co/2kBDkY0
    Now desktop is okay

    Shaun Kuschel a11n

    (@shaunkuschel)

    Automattic Happiness Engineer

    Hey @devildad,

    I just tried to visit the site but it looks like there might be a problem with the SSL certificate, as the domain sent an invalid response and this error: ERR_SSL_PROTOCOL_ERROR

    If you are still having issues with the columns, feel free to create a new thread. Thanks!

    Thread Starter devildad

    (@devildad)

    Everything is ok try again.

    Hi @devildad !

    Please note that you need to add the @media (max-width: 480px) with the CSS code, by doing that the CSS code will apply just to devices screen that don’t go over the 480px.

    @media (max-width: 480px) {
    
    ul.products, .wc-block-grid__products {
    	column-count: 2;
     }
    }
    Thread Starter devildad

    (@devildad)

    I tried and now facing another problem
    https://topupghorbd.com/product-category/garena-shells/

    Screenshot
    https://ibb.co/CQd9kBg

    Hello @devildad ,

    Please try this CSS in your Appearance > Customize > Additional CSS field:

    @media (max-width: 480px) {
        ul.products li.product .woocommerce-LoopProduct-link {
            display: inline-block;
        }
    }

    If you’d like to learn more about CSS, I highly recommend using the free tutorials at w3schools. Here, you can find the basics of selectors (how to target the right element on the page), and properties (how to change the element on the page).

    Thank you.

    Thread Starter devildad

    (@devildad)

    Now looking well thanks

Viewing 15 replies - 1 through 15 (of 15 total)
  • The topic ‘Related products and Category products not showing 2 in a row on mobile’ is closed to new replies.