|
PlasmicSteve
|
August 19, 2018 at 4:03 am
The QTY field for my site recently started appearing off screen right on phones. This issue appeared this week seemingly without changes to the theme, which is Unite by Colorlib.
Users on phones held vertically see something similar to the image below, but without the horizontal scroll bar that the browser shows:
https://imgur.com/a/atC1O2N
They’re clicking the “Register Now” button and getting an error that they must select a quantity, which they can’t get past (unless they rotate their phones, which most users don’t know to try).
How can I remedy this? FYI, I searched and tried using the code from the thread below, but it didn’t work, even after clearing cache.
https://eventespresso.com/topic/ticket-selector-table-issues/
Here’s a link to one of our events for testing:
https://sugarplumstudio.com/events/sloth-cupcakes/
Thank you.
|
|
Tony
|
August 20, 2018 at 3:51 am
Hi there,
You can use the styles listed here:
https://gist.github.com/joshfeck/c391f560acdb7fdc9235
That’s some additional styles wrapped in a media query to only apply to smaller devices, the important part to prevent the scrolling is this part:
.tkt-slctr-tbl {
table-layout: fixed;
}
You can mmodify/remove the other selectors if you prefer and you can add the snippet to:
Appearance -> Customize -> Additional CSS
|
|
PlasmicSteve
|
August 20, 2018 at 4:35 am
Okay, thank you. Suddenly I’m getting an error where I can’t Publish my modified custom CSS, which is a whole other issue. As soon as I’m able to rectify that, I’ll try this script. Much appreciated.
|
|
Tony
|
August 20, 2018 at 4:44 am
Where are you adding the CSS?
What error do you get?
|
|
PlasmicSteve
|
August 20, 2018 at 4:51 am
I’m adding it to Appearance -> Customize -> Additional CSS, which I hadn’t modified in a while.
When I first added the new code, it threw up a few “Looks like something’s gone wrong. Wait a couple seconds, and then try again” errors, with yellow circle ! alerts before a few lines of code (like “padding: auto”) that it didn’t like.
But when I cleared all of those out I got the error again, but with no alerts. I’m searching now and finding other people who are locked out of modifying their Custom CSS as well – possibly due to a conflict with a plugin.
Some people on this thread recommend deactivating Jetpack to fix it, but I don’t have Jetpack activated:
https://wordpress.org/support/topic/unable-to-make-theme-customization-and-publish-it/
|
|
Josh
|
August 20, 2018 at 8:12 am
There may be another plugin or theme causing a conflict. You can rule out a plugin or theme conflict is by installing the Health Check plugin, then go to WP → Dashboard → Heath Check → Troubleshooting. There you’ll Enable Troubleshooting Mode, then once that’s activated you can try your CSS edit once more.
At that point, does it let you save the CSS changes?
|
|
PlasmicSteve
|
August 20, 2018 at 4:02 pm
Sorry this took all day to get to.
I installed and activated Health Check, went into Troubleshooting Mode, and tried to edit the Additional CSS by adding the code Tony posted above to my existing CSS – but I got the same error. I removed the few lines of my existing code that were causing alerts and still got the error.
Then I tried deleting what I already had in there and adding only the code from this thread – still in Troubleshooting mode – and that did work, though I didn’t take it any further outside of troubleshooting mode. I wasn’t sure if I could test this on the live site, and I was concerned I might lose my existing CSS and not be able to get it back.
Any advice on where to take it from here?
|
|
PlasmicSteve
|
August 20, 2018 at 4:03 pm
Would it make sense to just download the Additional CSS file via FTP (if that’s possible) and edit it directly?
|
|
Josh
|
August 20, 2018 at 4:20 pm
There isn’t actually an Additional CSS file that can be edited via FTP. The Additional CSS panel in the customizer gets stored in the database, then the CSS is injected into the web pages by WordPress. So no files to edit.
It sounds like there was some invalid CSS within that panel and now that it’s been removed you’ll be able to make use of the Additional CSS panel again.
|
|
PlasmicSteve
|
August 20, 2018 at 4:38 pm
Thanks for explaining about where Additional CSS is stored.
But no, I took out the invalid CSS both before installing Health Check and it didn’t let me Publish in either case (even without adding the new code from above).
I just went through again, reviewed the errors and removed them, and again it gives me the error telling me I can’t Publish. It takes no time to process once I click Publish – it’s instantaneous.
|
|
Josh
|
August 20, 2018 at 4:51 pm
Since you earlier mentioned:
Then I tried deleting what I already had in there and adding only the code from this thread – still in Troubleshooting mode – and that did work, though I didn’t take it any further outside of troubleshooting mode.
That indicates you have a plugin or theme conflict. In which case you can narrow things down by reactivating the theme, then other plugins one-by-one until it doesn’t let you save CSS changes again.
|
|
PlasmicSteve
|
August 20, 2018 at 5:49 pm
I wound up deactivating and reactivating the theme, also deactivating all the plugins – nothing worked then.
But then I reactivated the plugins, went back into the Additional CSS, wiped everything out – added the code Tony posted above, and Published successfully.
I went through all the CSS, one chunk at a time, copying/pasting from a text file and publishing each time.
I don’t know why, but that worked – and then I cleared cache on my phone and viewed an event, and now the QTY button is visible – so the code worked.
Thanks so much to the both of you. I really appreciate the assistance.
|
|
Tony
|
August 21, 2018 at 3:51 am
Hmm, yeah, that’s a strange one but I’m glad you got it working.
|
