Checkout form not responsive with variant table
-
Hello,
the column My order is broken when adding a product type (Service) that contains variants (Body area: Facil+Number of session: 3 sessions).
When I switch to responsive mode, the table that includes these variants creates a horizontal scroll instead of nesting underneath.
Please, how can I fix this?The page I need help with: [log in to see the link]
-
Hello @laurapa82,
Can you please share the following?- A screenshot fo the problem, you can use Snipboard.
- A copy of your system status report. You can find it via WooCommerce > Status. Select “Get system report” and then “Copy for support”. Once you’ve done that, paste it here in your response.
- It’s also worth checking if there are any fatal error logs from WooCommerce > Status > Logs and choosing from the drop-down menu the
fatal-errors.logoption.
Look forward to hearing back from you.
hello Saif!
Thanks for your response. I attach a screenshot of the issue via Snipboard (hope I have donde it well..) https://snipboard.io/J0hKOG.jpg
You will see that checkout table spread horizontally.
I copy the system report here, thought didn´t found the
fatal-errors.logoption. :WordPress Environment WordPress address (URL): https://oceanclinic.shop Site address (URL): https://oceanclinic.shop WC Version: 7.3.0 REST API Version: ✔</img> 7.3.0 WC Blocks Version: ✔</img> 9.1.5 Action Scheduler Version: ✔</img> 3.5.2 Log Directory Writable: ✔</img> WP Version: 6.1.1 WP Multisite: – WP Memory Limit: 256 MB WP Debug Mode: – WP Cron: ✔</img> Language: es_ES External object cache: – Server Environment Server Info: nginx/1.20.2 PHP Version: 7.4.33 PHP Post Max Size: 16 MB PHP Time Limit: 30 PHP Max Input Vars: 1000 cURL Version: 7.61.1 OpenSSL/1.1.1k SUHOSIN Installed: – MySQL Version: 5.5.5-10.3.35-MariaDB Max Upload Size: 16 MB Default Timezone is UTC: ✔</img> fsockopen/cURL: ✔</img> SoapClient: ✔</img> DOMDocument: ✔</img> GZip: ✔</img> Multibyte String: ✔</img> Remote Post: ✔</img> Remote Get: ✔</img> Database WC Database Version: 7.3.0 WC Database Prefix: D8hwWPf_ Tamaño total de la base de datos: 150.08MB Tamaño de los datos de la base de datos: 134.11MB Tamaño del índice de la base de datos: 15.97MB D8hwWPf_woocommerce_sessions: Datos: 0.02MB + Índice: 0.02MB + Motor InnoDB D8hwWPf_woocommerce_api_keys: Datos: 0.02MB + Índice: 0.03MB + Motor InnoDB D8hwWPf_woocommerce_attribute_taxonomies: Datos: 0.02MB + Índice: 0.02MB + Motor InnoDB D8hwWPf_woocommerce_downloadable_product_permissions: Datos: 0.02MB + Índice: 0.06MB + Motor InnoDB D8hwWPf_woocommerce_order_items: Datos: 0.02MB + Índice: 0.02MB + Motor InnoDB D8hwWPf_woocommerce_order_itemmeta: Datos: 0.06MB + Índice: 0.03MB + Motor InnoDB D8hwWPf_woocommerce_tax_rates: Datos: 0.02MB + Índice: 0.06MB + Motor InnoDB D8hwWPf_woocommerce_tax_rate_locations: Datos: 0.02MB + Índice: 0.03MB + Motor InnoDB D8hwWPf_woocommerce_shipping_zones: Datos: 0.02MB + Índice: 0.00MB + Motor InnoDB D8hwWPf_woocommerce_shipping_zone_locations: Datos: 0.02MB + Índice: 0.03MB + Motor InnoDB D8hwWPf_woocommerce_shipping_zone_methods: Datos: 0.02MB + Índice: 0.00MB + Motor InnoDB D8hwWPf_woocommerce_payment_tokens: Datos: 0.02MB + Índice: 0.02MB + Motor InnoDB D8hwWPf_woocommerce_payment_tokenmeta: Datos: 0.02MB + Índice: 0.03MB + Motor InnoDB D8hwWPf_woocommerce_log: Datos: 0.02MB + Índice: 0.02MB + Motor InnoDB D8hwWPf_actionscheduler_actions: Datos: 0.14MB + Índice: 0.16MB + Motor InnoDB D8hwWPf_actionscheduler_claims: Datos: 0.02MB + Índice: 0.02MB + Motor InnoDB D8hwWPf_actionscheduler_groups: Datos: 0.02MB + Índice: 0.02MB + Motor InnoDB D8hwWPf_actionscheduler_logs: Datos: 0.13MB + Índice: 0.13MB + Motor InnoDB D8hwWPf_cmplz_cookiebanners: Datos: 0.02MB + Índice: 0.00MB + Motor InnoDB D8hwWPf_cmplz_cookies: Datos: 0.05MB + Índice: 0.00MB + Motor InnoDB D8hwWPf_cmplz_services: Datos: 0.02MB + Índice: 0.00MB + Motor InnoDB D8hwWPf_commentmeta: Datos: 0.02MB + Índice: 0.03MB + Motor InnoDB D8hwWPf_comments: Datos: 0.02MB + Índice: 0.09MB + Motor InnoDB D8hwWPf_e_events: Datos: 0.02MB + Índice: 0.02MB + Motor InnoDB D8hwWPf_e_notes: Datos: 0.02MB + Índice: 0.17MB + Motor InnoDB D8hwWPf_e_notes_users_relations: Datos: 0.02MB + Índice: 0.05MB + Motor InnoDB D8hwWPf_e_submissions: Datos: 0.02MB + Índice: 0.27MB + Motor InnoDB D8hwWPf_e_submissions_actions_log: Datos: 0.02MB + Índice: 0.11MB + Motor InnoDB D8hwWPf_e_submissions_values: Datos: 0.02MB + Índice: 0.03MB + Motor InnoDB D8hwWPf_gf_addon_feed: Datos: 0.02MB + Índice: 0.02MB + Motor InnoDB D8hwWPf_gf_draft_submissions: Datos: 0.02MB + Índice: 0.02MB + Motor InnoDB D8hwWPf_gf_entry: Datos: 0.02MB + Índice: 0.03MB + Motor InnoDB D8hwWPf_gf_entry_meta: Datos: 0.02MB + Índice: 0.05MB + Motor InnoDB D8hwWPf_gf_entry_notes: Datos: 0.02MB + Índice: 0.03MB + Motor InnoDB D8hwWPf_gf_form: Datos: 0.02MB + Índice: 0.00MB + Motor InnoDB D8hwWPf_gf_form_meta: Datos: 0.02MB + Índice: 0.00MB + Motor InnoDB D8hwWPf_gf_form_revisions: Datos: 0.02MB + Índice: 0.03MB + Motor InnoDB D8hwWPf_gf_form_view: Datos: 0.02MB + Índice: 0.03MB + Motor InnoDB D8hwWPf_gla_budget_recommendations: Datos: 0.22MB + Índice: 0.14MB + Motor InnoDB D8hwWPf_gla_merchant_issues: Datos: 0.02MB + Índice: 0.00MB + Motor InnoDB D8hwWPf_gla_shipping_rates: Datos: 0.02MB + Índice: 0.03MB + Motor InnoDB D8hwWPf_gla_shipping_times: Datos: 0.02MB + Índice: 0.02MB + Motor InnoDB D8hwWPf_icl_content_status: Datos: 0.02MB + Índice: 0.02MB + Motor InnoDB D8hwWPf_icl_core_status: Datos: 0.02MB + Índice: 0.02MB + Motor InnoDB D8hwWPf_icl_flags: Datos: 0.02MB + Índice: 0.02MB + Motor InnoDB D8hwWPf_icl_languages: Datos: 0.02MB + Índice: 0.03MB + Motor InnoDB D8hwWPf_icl_languages_translations: Datos: 0.20MB + Índice: 0.17MB + Motor InnoDB D8hwWPf_icl_locale_map: Datos: 0.02MB + Índice: 0.00MB + Motor InnoDB D8hwWPf_icl_message_status: Datos: 0.02MB + Índice: 0.03MB + Motor InnoDB D8hwWPf_icl_mo_files_domains: Datos: 0.02MB + Índice: 0.02MB + Motor InnoDB D8hwWPf_icl_node: Datos: 0.02MB + Índice: 0.00MB + Motor InnoDB D8hwWPf_icl_reminders: Datos: 0.02MB + Índice: 0.00MB + Motor InnoDB D8hwWPf_icl_strings: Datos: 3.52MB + Índice: 6.64MB + Motor InnoDB D8hwWPf_icl_string_batches: Datos: 0.02MB + Índice: 0.00MB + Motor InnoDB D8hwWPf_icl_string_packages: Datos: 0.02MB + Índice: 0.00MB + Motor InnoDB D8hwWPf_icl_string_positions: Datos: 4.25MB + Índice: 1.52MB + Motor InnoDB D8hwWPf_icl_string_status: Datos: 0.02MB + Índice: 0.02MB + Motor InnoDB D8hwWPf_icl_string_translations: Datos: 1.52MB + Índice: 0.63MB + Motor InnoDB D8hwWPf_icl_translate: Datos: 2.52MB + Índice: 0.09MB + Motor InnoDB D8hwWPf_icl_translate_job: Datos: 0.02MB + Índice: 0.02MB + Motor InnoDB D8hwWPf_icl_translations: Datos: 0.09MB + Índice: 0.22MB + Motor InnoDB D8hwWPf_icl_translation_batches: Datos: 0.02MB + Índice: 0.00MB + Motor InnoDB D8hwWPf_icl_translation_downloads: Datos: 0.02MB + Índice: 0.00MB + Motor InnoDB D8hwWPf_icl_translation_status: Datos: 1.27MB + Índice: 0.02MB + Motor InnoDB D8hwWPf_links: Datos: 0.02MB + Índice: 0.02MB + Motor InnoDB D8hwWPf_mailchimp_carts: Datos: 0.02MB + Índice: 0.00MB + Motor InnoDB D8hwWPf_mailchimp_jobs: Datos: 0.02MB + Índice: 0.00MB + Motor InnoDB D8hwWPf_options: Datos: 8.02MB + Índice: 0.16MB + Motor InnoDB D8hwWPf_postmeta: Datos: 78.41MB + Índice: 2.86MB + Motor InnoDB D8hwWPf_posts: Datos: 30.39MB + Índice: 0.50MB + Motor InnoDB D8hwWPf_termmeta: Datos: 0.02MB + Índice: 0.03MB + Motor InnoDB D8hwWPf_terms: Datos: 0.02MB + Índice: 0.03MB + Motor InnoDB D8hwWPf_term_relationships: Datos: 0.05MB + Índice: 0.02MB + Motor InnoDB D8hwWPf_term_taxonomy: Datos: 0.02MB + Índice: 0.03MB + Motor InnoDB D8hwWPf_usermeta: Datos: 0.08MB + Índice: 0.03MB + Motor InnoDB D8hwWPf_users: Datos: 0.02MB + Índice: 0.05MB + Motor InnoDB D8hwWPf_wc_admin_notes: Datos: 0.05MB + Índice: 0.00MB + Motor InnoDB D8hwWPf_wc_admin_note_actions: Datos: 0.02MB + Índice: 0.02MB + Motor InnoDB D8hwWPf_wc_category_lookup: Datos: 0.02MB + Índice: 0.00MB + Motor InnoDB D8hwWPf_wc_customer_lookup: Datos: 0.02MB + Índice: 0.03MB + Motor InnoDB D8hwWPf_wc_download_log: Datos: 0.02MB + Índice: 0.03MB + Motor InnoDB D8hwWPf_wc_order_coupon_lookup: Datos: 0.02MB + Índice: 0.03MB + Motor InnoDB D8hwWPf_wc_order_product_lookup: Datos: 0.02MB + Índice: 0.06MB + Motor InnoDB D8hwWPf_wc_order_stats: Datos: 0.02MB + Índice: 0.05MB + Motor InnoDB D8hwWPf_wc_order_tax_lookup: Datos: 0.02MB + Índice: 0.03MB + Motor InnoDB D8hwWPf_wc_product_attributes_lookup: Datos: 0.02MB + Índice: 0.02MB + Motor InnoDB D8hwWPf_wc_product_download_directories: Datos: 0.02MB + Índice: 0.02MB + Motor InnoDB D8hwWPf_wc_product_meta_lookup: Datos: 0.06MB + Índice: 0.09MB + Motor InnoDB D8hwWPf_wc_rate_limits: Datos: 0.02MB + Índice: 0.02MB + Motor InnoDB D8hwWPf_wc_reserved_stock: Datos: 0.02MB + Índice: 0.00MB + Motor InnoDB D8hwWPf_wc_tax_rate_classes: Datos: 0.02MB + Índice: 0.02MB + Motor InnoDB D8hwWPf_wc_webhooks: Datos: 0.02MB + Índice: 0.02MB + Motor InnoDB D8hwWPf_yoast_indexable: Datos: 1.48MB + Índice: 0.33MB + Motor InnoDB D8hwWPf_yoast_indexable_hierarchy: Datos: 0.02MB + Índice: 0.05MB + Motor InnoDB D8hwWPf_yoast_migrations: Datos: 0.02MB + Índice: 0.02MB + Motor InnoDB D8hwWPf_yoast_primary_term: Datos: 0.02MB + Índice: 0.03MB + Motor InnoDB D8hwWPf_yoast_seo_links: Datos: 0.08MB + Índice: 0.03MB + Motor InnoDB Post Type Counts attachment: 574 custom_css: 1 customize_changeset: 35 elementor_library: 38 mc4wp-form: 2 nav_menu_item: 26 page: 45 post: 9 product: 118 product_variation: 74 revision: 1832 shop_order: 20 shopengine-template: 3 wp_global_styles: 1 Security Secure connection (HTTPS): ✔</img> Hide errors from visitors: ✔</img> Active Plugins (24) Gravity Forms: por Gravity Forms – 2.6.8.1 WPML Multilingual CMS: por OnTheGoSystems – 4.5.14 WPML SEO: por OnTheGoSystems – 2.1.0 FiboSearch - AJAX Search for WooCommerce: por Equipo de FiboSearch – 1.21.0 Astra Pro: por Brainstorm Force – 4.0.0 Complianz | GDPR/CCPA Cookie Consent: por Really Simple Plugins – 6.3.9 Joinchat: por Creame – 4.5.14 Disable Comments: por WPDeveloper – 2.4.3 Elementor Pro: por Elementor.com – 3.10.1 Elementor: por Elementor.com – 3.10.0 EqualWeb: por Equalweb Accessibility – 1.0 Forms: 3rd-Party Integration: por zaus atlanticbt spkane – 1.8 Site Kit by Google: por Google – 1.90.1 Gravity Forms Multilingual: por OnTheGoSystems – 1.6.3 Extensión de Gravity Forms para Mailchimp: por Gravity Forms – 5.1 Mailchimp for WooCommerce: por Mailchimp – 2.7.6 MC4WP: Mailchimp for WordPress: por ibericode – 4.9.0 Temporary Login Without Password: por StoreApps – 1.8.1.1 WooCommerce Servired/RedSys Spain Gateway: por José Conti – 19.0.1 WooCommerce Multilingual & Multicurrency: por OnTheGoSystems – 5.1.2 WooCommerce: por Automattic – 7.3.0 Yoast SEO: por Equipo Yoast – 19.14 MailChimp for WordPress Multilingual: por OnTheGoSystems – 0.0.3 WPML String Translation: por OnTheGoSystems – 3.2.3 Inactive Plugins (6) EU/UK VAT Compliance for WooCommerce (Free): por David Anderson – 1.27.10 OTGS Installer: por OnTheGoSystems – 3.0.4 ShopEngine: por Wpmet – 3.1.1 ShopEngine Pro: por Wpmet – 2.1.0 WP Leads Builder For Any CRM: por Smackcoders – 2.5.3 WP Mail SMTP: por WPForms – 3.7.0 Dropin Plugins (1) maintenance.php: maintenance.php Settings API Enabled: – Force SSL: – Currency: EUR (€) Currency Position: right_space 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: ✔</img> Enforce Approved Product Download Directories: ✔</img> Order datastore: WC_Order_Data_Store_CPT WC Pages Base de la tienda: #12 - /tienda/ Carrito: #13 - /carrito/ Finalizar compra: #14 - /finalizar-compra/ Mi cuenta: #15 - /mi-cuenta/ Términos y condiciones: #986 - /condiciones-generales/ Theme Name: Linketer Astra Child Version: 1.0.0 Author URL: https://linketer.com Child Theme: ✔</img> Parent Theme Name: Astra Parent Theme Version: 4.0.1 – 4.0.2 está disponible Parent Theme Author URL: https://wpastra.com/about/?utm_source=theme_preview&utm_medium=author_link&utm_campaign=astra_theme WooCommerce Support: ✔</img> Templates Overrides: – Admin Enabled Features: activity-panels analytics coupons customer-effort-score-tracks experimental-products-task experimental-import-products-task experimental-fashion-sample-products shipping-smart-defaults shipping-setting-tour homescreen marketing multichannel-marketing mobile-app-banner navigation onboarding onboarding-tasks remote-inbox-notifications remote-free-extensions payment-gateway-suggestions shipping-label-banner subscriptions store-alerts transient-notices woo-mobile-welcome wc-pay-promotion wc-pay-welcome-page Disabled Features: minified-js new-product-management-experience settings Daily Cron: ✔</img> Next scheduled: 2023-01-27 17:00:01 +00:00 Options: ✔</img> Notes: 40 Onboarding: completed Action Scheduler Complete: 334 Oldest: 2022-12-27 10:36:47 +0000 Newest: 2023-01-27 08:35:03 +0000 Failed: 16 Oldest: 2022-12-02 11:47:49 +0000 Newest: 2022-12-22 17:14:16 +0000 Pending: 1 Oldest: 2023-01-28 08:34:38 +0000 Newest: 2023-01-28 08:34:38 +0000 Status report information Generated at: 2023-01-27 08:49:19 +00:00 `Hi @laurapa82
Thanks for sharing the screenshot as well as the System Status Report.
Checking your Checkout page, this is what I’m seeing on my end:

Can you please confirm if the issue has been resolved here already?
Thanks!
Hello!
there is no problem with that kind of product. Please pick from SERVICES the product PEELING SESDERMA where you have to choose several options.
Kind regards!
Hi @laurapa82
Thanks for sharing the product to test here.
On my end, this is how I see the Checkout page:

Can you please try to clear your browser’s cache or try another browser or in incognito mode and see if that works?
I guess that is desktop, but the problem with the table is in mobile.
How big is that width?
Regards
Hi @laurapa82
Thanks for clarifying that the issue you are referring to here belongs to mobile version.
Checking your site once again on my Android Mobile Phone, I am not able to reproduce the issue as seen on the screenshot below. I am using Mozilla Firefox browser here:

Have your tried to clear your browser’s cache or try another browser or use incognito mode and see if that works?
Hi @laurapa82 ,
We haven’t heard back from you in a while, so I’m going to mark this as resolved – we’ll be here if and/or when you are ready to continue.
Cheers!
- A screenshot fo the problem, you can use Snipboard.
The topic ‘Checkout form not responsive with variant table’ is closed to new replies.