Formatting Issue @ Check Out on Mobile iOS Chrome

Hello,

How can I update the formatting on the checkout page? See the attached screenshots. The width of the columns seems to be off making it difficult to read on mobile.

Attachments:

You must be logged in to view attached files.

Hello,

Please deactivate all the plugins not related to the theme and switch the parent theme, check the issue, if the problem remains, leave the plugins not activated and provide the site admin access to the private area

Best Regards

Hello,

The issue was with CSS code provided by another support team member for another ticket. By removing the CSS code this issue is resolved. BUT, now the other issue is back. Reference Ticket #145322.

With subscriptions available in WooCommerce, there is a lot of text in the shopping cart “Price” column. So I inquired about increasing the size of the ‘Price’ column. Do you have any better recommendations?

Alternatively, is there a way to disable the subscription methods from appearing in the shopping cart?

This is the CSS I removed:

.cart-table-section td{
width:20px;
}

.cart-table-section span.subscription-details{
    font-size: 90%;
}

Attachments:

You must be logged in to view attached files.

Hello,

As you used that code in global custom css code block. That’s why it affects all the screens and not looking good in mobile view.

If you used the same code in Custom CSS for desktop from Theme Settings >> Custom Css. Then it only applies on desktop screen and didn’t affect your mobile view.

https://jmp.sh/gXqm4yW

Result in desktop view: https://jmp.sh/bL5pPyR
Result in mobile screens: https://jmp.sh/mQHSSCN

In case if you want to hide the subscription details from your shopping cart. You can insert the below css in Theme Setting >> Custom Css >> Global Custom CSS:

.cart-table-section span.subscription-details{
display:none;
}

Result after hiding: https://jmp.sh/C7TUfMk

Best Regards.

Ah of course. Great recommendation!

When adding the code to desktop CSS, is there a way to increase the column width for the “Product” and decrease the column width of “Quantity”?

Because now the “Product” name covers four lines because the column is smaller and the “Quantity” column looks like it was increased in size so it has extra room.

Hello,

It is not possible to increase the column width for the “Product” and decrease the column width of “Quantity”.

Because the only way to decrease the quantity column width is that we have to make the table heading “Quantity” smaller by hitting its font size. And if we do this your whole table looks very bad. So it is better to just let the product name as four columns.

Best Regards.

Ah I appreciate the information!

Hello,

I’m so happy to hear you are pleased with the Theme and Support. XTemos strives to deliver the best customer experience, and it makes our day to hear we have accomplished that.

We count ourselves lucky to have you as a customer.

Thanks for contacting us.
Have a great day.

Topic Closed.
Best Regards.

[Author]

Posts