Cart Page redesign problems with styling and auto-rotate with iPhones

  • Hi there so as you can see from my cart page in the link I have provided. You’ll obviously need to go add a product which you can do here – https://jack.idwithin.xyz/product/sodom/

    As you can see I have changed the style and have also been changing things like the widths of the columns to get the design we want. So, I am wondering if my two problems might be connected.
    For desktop and tablet. I controlled some of the widths of the th and tds to get the design I wanted. I think for the large desktop sizes and tablet I mostly controlled the widths of th.product-thumbnail th.product-name and th-product-remove. Squashing in the others to fit the client’s designs
    It didn’t start to get hard until I got down to mobile widths and trying to change the column widths here go tricky as you remove the header as part of responsiveness so I had to display it again. Then hide the new pseudo-element titles etc. As we want the table design throughout responsiveness. As you can see, I am very close but trying to adjust the widths. The th’s give off a different length the td’s. And it’s been very hard to style mobile. Is there a reason for this? Even though I make th.product thumbnail Xpx or X%. – below it td.product-thumbnail gives off an entirely different width (usually bigger) even though they are matched.

    So my first question is, is there an easier way to control the table and create the design I want for mobile or am I going to have to try something else? As it’s been really hard to redo it with CSS and overwrite your original styles.

    Another problem I have noticed, and I think it’s only happening on iPhone’s. As I’ve tested it on Android and it’s fine. Yet on my clients iPhone X and iPhone 11 XL the glitches happen there.

    It is to do with the auto rotate feature on phones. When you turn it to landscape it seems to sort itself out fine. Yet when you turn it back to portrait the code is all scrambled and messy. What could be causing this? Is this something different? Or might this be related with how I’ve tried to change and manipulate the tables to look like the clients designs?

    Thanks, and I hope I have explained my problems well enough. I have attached images of how the auto-rotate can mess up the design.

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

Viewing 10 replies - 1 through 10 (of 10 total)
  • Thread Starter idwithin

    (@idwithin)

    Sorry I couldn’t attach images to this so I uploaded them. This is to do with the auto-rotate glitch on iPhone

    https://ibb.co/KKVZpWN – Before on portrait everything is okay

    https://ibb.co/h8tFThQ – Auto rotate to landscape everything is still okay.

    https://ibb.co/wpWRcW0 – rotate back to portrait. It is all messed up.

    Thanks for your time ??

    Plugin Support fevered – a11n

    (@fevered)

    Hey there!

    Could you please share a copy of your site’s System Status? 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.

    Thread Starter idwithin

    (@idwithin)

    here you go and thank you for your fast response.

    
### WordPress Environment ###

WordPress address (URL): https://jack.idwithin.xyz
Site address (URL): https://jack.idwithin.xyz
WC Version: 4.1.1
REST API Version: ? 1.0.7
WC Blocks Version: ? 2.5.16
Action Scheduler Version: ? 3.1.6
WC Admin Version: ? 1.1.3
Log Directory Writable: ?
WP Version: 5.4.1
WP Multisite: –
WP Memory Limit: 768 MB
WP Debug Mode: –
WP Cron: ?
Language: en_US
External object cache: –

### Server Environment ###

Server Info: Apache
PHP Version: 7.3.18
PHP Post Max Size: 128 MB
PHP Time Limit: 1500
PHP Max Input Vars: 2000
cURL Version: 7.62.0
OpenSSL/1.0.2k

SUHOSIN Installed: –
MySQL Version: 10.3.22-MariaDB-log-cll-lve
Max Upload Size: 128 MB
Default Timezone is UTC: ?
fsockopen/cURL: ?
SoapClient: ?
DOMDocument: ?
GZip: ?
Multibyte String: ?
Remote Post: ?
Remote Get: ?

### Database ###

WC Database Version: 4.1.1
WC Database Prefix: wpsj_
Total Database Size: 12.21MB
Database Data Size: 11.91MB
Database Index Size: 0.30MB
wpsj_woocommerce_sessions: Data: 0.03MB + Index: 0.00MB + Engine MyISAM
wpsj_woocommerce_api_keys: Data: 0.00MB + Index: 0.00MB + Engine MyISAM
wpsj_woocommerce_attribute_taxonomies: Data: 0.00MB + Index: 0.00MB + Engine MyISAM
wpsj_woocommerce_downloadable_product_permissions: Data: 0.00MB + Index: 0.00MB + Engine MyISAM
wpsj_woocommerce_order_items: Data: 0.00MB + Index: 0.00MB + Engine MyISAM
wpsj_woocommerce_order_itemmeta: Data: 0.00MB + Index: 0.00MB + Engine MyISAM
wpsj_woocommerce_tax_rates: Data: 0.00MB + Index: 0.00MB + Engine MyISAM
wpsj_woocommerce_tax_rate_locations: Data: 0.00MB + Index: 0.00MB + Engine MyISAM
wpsj_woocommerce_shipping_zones: Data: 0.00MB + Index: 0.00MB + Engine MyISAM
wpsj_woocommerce_shipping_zone_locations: Data: 0.00MB + Index: 0.00MB + Engine MyISAM
wpsj_woocommerce_shipping_zone_methods: Data: 0.00MB + Index: 0.00MB + Engine MyISAM
wpsj_woocommerce_payment_tokens: Data: 0.00MB + Index: 0.00MB + Engine MyISAM
wpsj_woocommerce_payment_tokenmeta: Data: 0.00MB + Index: 0.00MB + Engine MyISAM
wpsj_woocommerce_log: Data: 0.00MB + Index: 0.00MB + Engine MyISAM
wpsj_actionscheduler_actions: Data: 0.01MB + Index: 0.02MB + Engine MyISAM
wpsj_actionscheduler_claims: Data: 0.00MB + Index: 0.00MB + Engine MyISAM
wpsj_actionscheduler_groups: Data: 0.00MB + Index: 0.01MB + Engine MyISAM
wpsj_actionscheduler_logs: Data: 0.01MB + Index: 0.01MB + Engine MyISAM
wpsj_commentmeta: Data: 0.00MB + Index: 0.00MB + Engine MyISAM
wpsj_comments: Data: 0.00MB + Index: 0.01MB + Engine MyISAM
wpsj_links: Data: 0.00MB + Index: 0.00MB + Engine MyISAM
wpsj_loginizer_logs: Data: 0.00MB + Index: 0.01MB + Engine MyISAM
wpsj_options: Data: 1.09MB + Index: 0.05MB + Engine MyISAM
wpsj_postmeta: Data: 0.10MB + Index: 0.06MB + Engine MyISAM
wpsj_posts: Data: 10.66MB + Index: 0.07MB + Engine MyISAM
wpsj_termmeta: Data: 0.00MB + Index: 0.01MB + Engine MyISAM
wpsj_terms: Data: 0.00MB + Index: 0.01MB + Engine MyISAM
wpsj_term_relationships: Data: 0.00MB + Index: 0.00MB + Engine MyISAM
wpsj_term_taxonomy: Data: 0.00MB + Index: 0.00MB + Engine MyISAM
wpsj_usermeta: Data: 0.01MB + Index: 0.01MB + Engine MyISAM
wpsj_users: Data: 0.00MB + Index: 0.01MB + Engine MyISAM
wpsj_wc_admin_notes: Data: 0.00MB + Index: 0.00MB + Engine MyISAM
wpsj_wc_admin_note_actions: Data: 0.00MB + Index: 0.00MB + Engine MyISAM
wpsj_wc_category_lookup: Data: 0.00MB + Index: 0.00MB + Engine MyISAM
wpsj_wc_customer_lookup: Data: 0.00MB + Index: 0.00MB + Engine MyISAM
wpsj_wc_download_log: Data: 0.00MB + Index: 0.00MB + Engine MyISAM
wpsj_wc_order_coupon_lookup: Data: 0.00MB + Index: 0.00MB + Engine MyISAM
wpsj_wc_order_product_lookup: Data: 0.00MB + Index: 0.00MB + Engine MyISAM
wpsj_wc_order_stats: Data: 0.00MB + Index: 0.00MB + Engine MyISAM
wpsj_wc_order_tax_lookup: Data: 0.00MB + Index: 0.00MB + Engine MyISAM
wpsj_wc_product_meta_lookup: Data: 0.00MB + Index: 0.01MB + Engine MyISAM
wpsj_wc_tax_rate_classes: Data: 0.00MB + Index: 0.01MB + Engine MyISAM
wpsj_wc_webhooks: Data: 0.00MB + Index: 0.00MB + Engine MyISAM

### Post Type Counts ###

acf-field: 33
acf-field-group: 7
attachment: 13
bc_x1379_op_type: 2
custom_css: 1
customize_changeset: 220
nav_menu_item: 5
page: 11
post: 4
product: 4
revision: 215

### Security ###

Secure connection (HTTPS): ?
Hide errors from visitors: ?

### Active Plugins (12) ###

Advanced Custom Fields PRO: by Elliot Condon – 5.8.11
Classic Editor: by WordPress Contributors – 1.5
Header and Footer Scripts: by Digital Liberation – 2.2.1
Loginizer: by Raj Kothari – 1.4.4
Navi, by Bonfire: by Bonfire Themes – 1.7
Ocean Extra: by OceanWP – 1.6.3
Shortcode in Menus: by Gagan Deep Singh – 3.5
SVG Support: by Benbodhi – 2.3.18
UpdraftPlus - Backup/Restore: by UpdraftPlus.Com
DavidAnderson – 1.16.25

WooCommerce PayPal Checkout Gateway: by WooCommerce – 2.0.2
WooCommerce: by Automattic – 4.1.1 (update to version 4.2.0 is available)
WP Rocket: by WP Media – 3.5.5.1

### Inactive Plugins (1) ###

WPC Fly Cart for WooCommerce: by WPClever.net – 2.0.8

### Dropin Plugins (1) ###

advanced-cache.php: advanced-cache.php

### Must Use Plugins (1) ###

rms_unique_wp_mu_pl_fl_nm.php: by  –

### Settings ###

API Enabled: –
Force SSL: –
Currency: GBP (￡)
Currency Position: left
Thousand Separator: ,
Decimal Separator: .
Number of Decimals: 0
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: #14 - /editions/
Cart: #157 - /cart/
Checkout: #159 - /checkout/
My account: ? Page not set
Terms and conditions: #161 - /terms-conditions/

### Theme ###

Name: OceanWP Child
Version: 1.0
Author URL: https:/idwithin.xyz
Child Theme: ?
Parent Theme Name: OceanWP
Parent Theme Version: 1.8.3
Parent Theme Author URL: https://oceanwp.org/about-me/
WooCommerce Support: ?

### Templates ###

Overrides: oceanwp-child/woocommerce/cart/cart-shipping.php
oceanwp-child/woocommerce/cart/cart-totals.php
oceanwp-child/woocommerce/cart/cart.php
oceanwp/woocommerce/cart/mini-cart.php
oceanwp/woocommerce/content-single-product.php
oceanwp/woocommerce/loop/loop-start.php
oceanwp-child/woocommerce/single-product/add-to-cart/simple.php
oceanwp-child/woocommerce/single-product/price.php
oceanwp-child/woocommerce/single-product/short-description.php
oceanwp-child/woocommerce/single-product/stock.php
oceanwp/woocommerce/single-product/title.php

### Action Scheduler ###

Complete: 33
Oldest: 2020-05-06 08:39:33 +0000
Newest: 2020-05-30 10:11:40 +0000
    Plugin Support fevered – a11n

    (@fevered)

    Thanks for that! I can see that the theme you are basing your child theme on is the OceanWP theme – I’m not familiar with that one, so I’m not sure if I can give much advice here myself. Have you reached out to them to see if they have any insight on making those changes?

    Thread Starter idwithin

    (@idwithin)

    I have reached out to them about something else as a matter but they have not responded to me and I don’t think they are good at that.

    Would you suggest another theme?

    Do you think it is the theme that is cause these problems?

    Plugin Support fevered – a11n

    (@fevered)

    I’m sorry to hear that!

    In terms of themes, I always recommend the free Storefront theme as it is specifically developed for WooCommerce sites.

    I am not sure if it is the theme causing the issue, but you could test that by temporarily switching to another theme (such as Storefront as I mentioned above, or Twenty Nineteen) to verify

    Thread Starter idwithin

    (@idwithin)

    Hi there I have tried a different theme and still get different sized widths when I try control them myself with CSS to get the design I want. For reference I am using Twenty nineteen child.

    Is this basically something that cannot be achieved then? I thought I’d be able to control the table fairly easily and use it to create the design I want but it’s proving very hard and putting the launch behind trying to figure this out.

    Do you have any other recommendations on how I could achieve this look?

    Here is an example from 2019 theme. Even though I can get the table back to it’s normal form. When I change the width of .product-thumbnail the first column – to 25%. Both the th and td give off completely different widths and it pushed it out from the design – https://ibb.co/SfBvtyn

    It’s very confusing. And just wondering how I would be able to achieve the design I want?

    Thread Starter idwithin

    (@idwithin)

    I’ve tried some other tings with CSS and trying to edit with pixels instead of % widths. Using 2019 theme and then trying Astra theme.

    Is this due to how you have set up the table? Has no one else come across this problem before when trying to change the look of the table?

    Seems weird how I cannot control the widths for being 100% to making the table responsive. To being something else that fits in with my design.

    Plugin Support fevered – a11n

    (@fevered)

    Hey there,

    This is a fairly complex development topic. I’m going to leave it open for a bit to see if anyone is able to chime in to help you out.

    I can also recommend the following places for more development-oriented questions:

    1. WooCommerce Slack Community: https://woocommerce.com/community-slack/
    2. WooCommerce FB group: https://www.facebook.com/groups/advanced.woocommerce/
    Thread Starter idwithin

    (@idwithin)

    No one seems to be able to help or even replied to my query. I am really puzzled how it is so hard to change the widths of this table and it’s columns to fit the design my client gave me. Which is essentially just a smaller version of the main table on desktop.

    I just want to keep the table looking basically like it should on desktop but just have control of the column widths.

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘Cart Page redesign problems with styling and auto-rotate with iPhones’ is closed to new replies.