|
Jarred
|
July 17, 2023 at 6:56 pm
Hi, reposting because APRIL 2023 post was never answered.
on mobile devices when a customer lands on the registration form, the right side is cut off. For some reason the form is floating right or something? You can use your thumb to move it left and right. This never happened before update.
Second,
The dates and time are scrunched together and words doint complety. For example
It might look like this instead of saying Wednesday
It Might say Wedn
esday
https://app.screencast.com/3qlEVW2Kz2oyd
Before the update we had css that made all the dates and times be one single row on their own, so basically each date and time filled up the whole box on one row and they were stacked on top of eachother. How can we fix this back becuase it looks bad with the EE css taking over.
The video for the registration form will be shared on private reply. The video is from desktop but using the mobile inspector on chrome. However I also tested on Iphone 14pro max and it does exact same thing.
Thanks
|
|
Jarred
|
July 17, 2023 at 6:56 pm
This reply has been marked as private.
|
|
Rio
|
July 17, 2023 at 8:12 pm
Can you send me direct link to the list of events? i might be able to share some code that applicable to your theme.
Thanks
|
|
Jarred
|
July 17, 2023 at 9:07 pm
Okay ya that would be great. I had an old line of css that is still on my child theme but it doesn’t work with the update and I’m just not experienced enough to figure it out I guess. So yea I’d you can see a way to do it I will definitely try and post it on my css file. Thanks , I will post the link in private reply next.
|
|
Jarred
|
July 17, 2023 at 9:08 pm
This reply has been marked as private.
|
|
Tony
|
July 18, 2023 at 5:39 am
Hi Jarred,
The registration form overflow is from the select element in the ‘Additional Questions for Campers’ group. The CSS has the width set to:
#ee-single-page-checkout-dv select {
width: fit-content;
}
Which is forcing the select element to display the full content of the select across the device. You can override that using:
#ee-single-page-checkout-dv select {
width: 100%;
}
I’ll create a ticket with our developers for this as this will affect others.
For the datetimes, try this:
.ee-event-datetimes-ul .ee-event-datetimes-li {
width: auto;
}
Add both of those to Dashboard -> Appearance -> Customize -> Additional CSS
|
|
Jarred
|
July 18, 2023 at 2:34 pm
Awesome!! Thanks Tony, both of the code suggestions fixed my issue for now. The times all line up in one row each on mobile.
And on the checkout the registration form is centered now. There is still a little extra white on each sides but thats probably just my theme. Anyway, thanks for those codes. Much appreciated.
|
|
Rio
|
July 18, 2023 at 10:54 pm
Cool. Feel to send us message if there’s anything we can do for you.
thanks.
|
