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

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!

### 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!

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, 10 months ago by Victor Wilson.

Thanks

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!

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

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!

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;
 }
}

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.

Now looking well thanks