|
nafujiwara
|
July 11, 2023 at 7:33 pm
Hi, on the event page the ticket selector is not showing on smaller phone screens. It’s confusing a lot of older customers who don’t seem to know how to scroll or hold their phone sideways. is there a way to shrink the ticket selector table on smaller phone screens?
|
|
nafujiwara
|
July 11, 2023 at 7:36 pm
image for reference
|
|
nafujiwara
|
July 11, 2023 at 7:38 pm
|
|
Rio
|
July 12, 2023 at 12:01 am
I did look on my phone and Dev tool and everything seems fine. Can you tell me the browser you’re using and the phone? i might be able to recommend a CSS code that you can use for your site.
thanks
|
|
nafujiwara
|
July 12, 2023 at 12:35 am
Not sure which phones are displaying like this exactly, but this screen shot is from the wordpress “Mobile View” when editing pages and it’s what some users are experiencing. I’m assuming its from older phones with smaller displays
|
|
Rio
|
July 12, 2023 at 6:45 pm
if it is just the mobile preview from wordpress, it is possible that some css didn’t load that quick, try to refresh it in mobile view and see if it change. Also you can use the dev tool to check them in different screen size.
Just like this.
https://app.screencast.com/jqHSuDAcZ0C2q
You will notice that sometimes the preview didn’t go well, so i have to refresh it to really look on the size.
thanks
|
|
nafujiwara
|
July 12, 2023 at 10:33 pm
No customers are experiencing this on their actual phones. As I don’t know which phones they are I can only text VIA the wordpress editor. I can post the custom CSS I’m using, however I deleted it all as a test and it hasn’t changed.
.rpwe-block ul{
list-style: none !important;
margin-left: 0 !important;
padding-left: 0 !important;
}
.read-more, .more-link {
color: #ef0202;
padding-left: 8px;
}
.rpwe-block li{
border-bottom: 1px solid #eee;
margin-bottom: 10px;
padding-bottom: 10px;
list-style-type: none;
}
.rpwe-block a{
display: inline !important;
text-decoration: none;
}
.rpwe-block h3 {
background: none repeat scroll 0 0 rgba(0, 0, 0, 0) !important;
clear: none;
font-size: 22px !important;
font-weight: 400;
line-height: 1.5em;
margin-bottom: 0 !important;
margin-top: 0 !important;
padding-bottom: 1px;
}
.rpwe-thumb{
border: 1px solid #eee !important;
box-shadow: none !important;
margin: 2px 10px 2px 0;
padding: 3px !important;
}
.rpwe-summary {
font-size: 12px;
line-height: 24px;
}
.rpwe-time{
color: #bbb;
font-size: 11px;
}
.rpwe-alignleft{
display: inline;
float: left;
}
.rpwe-alignright{
display: inline;
float: right;
}
.rpwe-aligncenter{
display: block;
margin-left: auto;
margin-right: auto;
}
.rpwe-clearfix:before,
.rpwe-clearfix:after{
content: “”;
display: table !important;
}
.rpwe-clearfix:after{
clear: both;
}
.rpwe-clearfix{
zoom: 1;}
#espresso_calendar .thumb-wrap,
.ui-tooltip-content p {
display: block;
}
.fc-event-title{
font-weight:bold;
color:rgba(221,37,37,0.9);
}
.time-display-block{
font-weight:bold;
|
|
Rio
|
July 13, 2023 at 12:48 am
Do you know the Width of the mobile screen? i did test your site in Iphone Screen and it looks fine. I believe, the mobile screen of the one trying to access is about 320PX and bellow.
try this
@media only screen and (max-width: 600px) {
table.tkt-slctr-tbl tr td:first-child {
display: flex;
flex-direction: column;
}
}
thanks
|
|
nafujiwara
|
July 13, 2023 at 1:23 am
I do not, I’ve just had a few customers call and say they are having trouble moving forward in the registration process. After troubleshooting the issue was they weren’t selecting a ticket quantity because they couldn’t see it.
This CSS code seems to fix the issue with the “mobile view” on the wordpress editor and doesn’t seem to have any ill effects with my phone so I think it’ll work. Thank you!
|
|
nafujiwara
|
July 13, 2023 at 5:55 pm
So I’ve just received another problem with the updated site, but this time I’ve found the underlying issue. The real issue is customers with enlarged font on their phones. Is there a way we can force smaller fonts even though they have it set to large font in their phone settings?
|
|
Rio
|
July 13, 2023 at 9:16 pm
I’m sorry, but that is beyond our control. your customer should have the Scroll bar to use, encase he/she manually increase the font size.
thanks.
|
