Display issues on mobile

[ninefootone]

I’m having some issues with the display of ticket options on my page here…

http://www.standrewschurch.org.uk.php72-38.lan3-1.websitetestlink.com/church-life/weekend-away-booking/

If you check the attached screenshots you’ll see that it looks fine (filling 100% of the available space) on desktop but when we get down to mobile (small tablet) view the layout is off (not filling the available width and with odd lines showing).

I’ve tried some CSS to solve this but I’m struggling. Can you make any suggestions to ensure this layout displays nicely on the site?

[Andras]

Hi ninefootone,

Thanks for reaching out!

I’m sorry to hear about that formatting issue.

This likely comes from your theme. Nonetheless I would be happy to take a look at it to see if I can help with a quick css fix.

I checked the url you shared but the ticket info part is totally missing. (screenshot: https://cloudup.com/cnCnEdCGf18)

Is it maybe visible when you visit it as a logged in user?

If you could share with me a url where the issue is visible I can take a look at it.

Cheers,
Andras

[ninefootone]

Sorry, I was working on it today and it’s now here…

http://www.standrewschurch.org.uk.php72-38.lan3-1.websitetestlink.com/church-life/weekend-away-2018/

I tried deactivating plugins and switching to TwentySeventeen but still had the same issues.

[Andras]

Thanks!

Probably the easiest would be is removing the bottom border of the cells, like this:

.tribe-events-tickets td {
border-bottom: none !important;
}

Let me know if that helps.

Cheers,
Andras

[ninefootone]

Thanks, that kind of helps (see http://www.standrewschurch.org.uk.php72-38.lan3-1.websitetestlink.com/church-life/weekend-away-2018/).

It’s still a little messy at the mobile width. Is there a way to push the title/price onto the second line just on mobile so you have the quantity selector above and the text below?

Jon

[Andras]

Sure thing.

You can either try this:

[code language=”css”]@media screen and (max-width: 480px) {
.tribe-events-tickets td, .tribe-events-tickets td span {
width: 100%;
clear: both;
padding: 0 !important;
margin: auto;
}
}[/code]

or possibly this:

[code language=”css”]@media screen and (max-width: 480px) {
.tribe-events-tickets td {
display: table-row;
}
}[/code]

Both might need some further adjustments for having a separator line or alignment.

Hope this helps.

Cheers,
Andras

[ninefootone]

Thanks, that’s really helpful!

[Andras]

Stoked to hear!

Please, let me know if you need any further advice or if we can close this as resolved.

Cheers,
Andras

[Support Droid]

Hey there! This thread has been pretty quiet for the last three weeks, so we’re going to go ahead and close it to avoid confusion with other topics. If you’re still looking for help with this, please do open a new thread, reference this one and we’d be more than happy to continue the conversation over there.

Thanks so much!
The Events Calendar Support Team

[Author]

Posts