Mobile View messed up after upgrades

[Math]

Hi

My mobile view has been messed up since the upgrades, as you can see in the screenshot all the details are squashed and can’t be viewed properly.
And there’s all of a sudden a black box over the number of tickets making that number impossible to view.

[Geoff B.]

Good afternoon Math and welcome back!

Thank you for reaching out to us.

We are sorry to hear about the mobile view not looking great after the latest update.
I would love to help you with this topic.

As a first troubleshooting step, could you please provide us with your complete system information in a private reply using the instructions found in the following link?

https://theeventscalendar.com/knowledgebase/sharing-sys-info/

Secondly, could you please send me a copy of the latest version of your WordPress theme / child theme via a link to a .zip file link (stored Dropbox or Google Drive) so that I can run some tests on my end ? I recommend a private reply for that purpose.

Please ensure you are using the latest files as found on your actual website.
This way I will get access to any updates or customizations you might have made.

It looks like there is some type of customization in place that requires some updating.

Finally, would it be possible to have the URL to your specific example ?

Hang in there!

Geoff B.

[Math]

This reply is private.

[Geoff B.]

Good evening Math,

Thank you for the files.
I tried to use that theme on my end and could not reproduce the screenshot for some reason.

At this point, could you provide me with a temporary login that would allow me to make a dummy purchase (I will not complete the process, I simply want to be able to get to the cart on your website).

Hang in there!

Geoff B.

[Math]

This reply is private.

[Geoff B.]

Good afternoon Math,

Actually, I believe this is caused by a CSS rule in your theme.

Try adding the following CSS rule to your style.css file or in your Custom CSS metabox:

@media only screen and (max-width: 568px) {
.woocommerce-cart .woocommerce table.cart td.product-remove {
padding-left: 0px;
}
}

Let me know how that goes.

Best regards,
Geoff B.

[Math]

Hi Geoff

Thanks for the CSS it fixed the problem but there’s still that issue of the black box covering the quantity. How do i remove it?

[Geoff B.]

Good evening Math,

I am glad that helped.

The black box is caused by another one of your theme’s CSS rules:

textarea[disabled], input[type="text"][disabled], input[type="password"][disabled], input[type="datetime"][disabled], input[type="datetime-local"][disabled], input[type="date"][disabled], input[type="month"][disabled], input[type="time"][disabled], input[type="week"][disabled], input[type="number"][disabled], input[type="email"][disabled], input[type="url"][disabled], input[type="search"][disabled], input[type="tel"][disabled], input[type="color"][disabled], textarea[readonly], input[type="text"][readonly], input[type="password"][readonly], input[type="datetime"][readonly], input[type="datetime-local"][readonly], input[type="date"][readonly], input[type="month"][readonly], input[type="time"][readonly], input[type="week"][readonly], input[type="number"][readonly], input[type="email"][readonly], input[type="url"][readonly], input[type="search"][readonly], input[type="tel"][readonly], input[type="color"][readonly], fieldset[disabled] textarea, fieldset[disabled] input[type="text"], fieldset[disabled] input[type="password"], fieldset[disabled] input[type="datetime"], fieldset[disabled] input[type="datetime-local"], fieldset[disabled] input[type="date"], fieldset[disabled] input[type="month"], fieldset[disabled] input[type="time"], fieldset[disabled] input[type="week"], fieldset[disabled] input[type="number"], fieldset[disabled] input[type="email"], fieldset[disabled] input[type="url"], fieldset[disabled] input[type="search"], fieldset[disabled] input[type="tel"], fieldset[disabled] input[type="color"] {
cursor: not-allowed;
background-color: #4c5859;
opacity: 1;
}

For our purpose, we’ll focus on the part that is causing trouble.
Try adding the following CSS rule to your style.css file or in your Custom CSS metabox:

input[type="number"][readonly] {
background-color: transparent !important;
}

Let me know how that goes.

Best regards,
Geoff B.

[Math]

My issue is resolved. Thanks for a 5* support as always.

[Geoff B.]

Good afternoon Math,

I am stoked we managed to fix all of your issues.

You are welcome back in our support forums any time 🙂

For now, I am going to close this thread.

Have a great weekend!

Geoff B.

[Author]

Posts