CSS layout issue with single page event, box missing, price not aligned

[Tim Brown]

Hi Modern Tribe Support,

I’m having an issue with the way events are being displayed when shown as a single page event. The event title is fine but the next line which shows the date and the price of the event is odd. There should be a box (the same as the ‘details’ and ‘venue’ box) with the date and time of the event then, on the next line, the price. However, I get no box and the price is sitting straight after the date and time with no space between, it also sits slightly lower making it look wrong.

On mobile however it renders correctly, also, if I change the dimensions of my browser (dragging it smaller horizontally from the side) the element eventually pops to what it should look like.

I’m using the Storefront theme (child), I’ve tried changing themes and disabling plugins but the behaviour persists. It also happens on Chrome and Firefox. I’m also on the latest versions of everything.

I’ve included the url of an example in the thread submission form

Hope you can assist,

Thanks

[Jennifer]

Hi Tim,

Thanks for reaching out!

To get the price to display on the next line, you could add the following CSS to the Custom CSS area under Appearance > Customize (if you have one) or to the style.css file of your child theme:

.tribe-events-schedule .tribe-events-cost {
display: block;
}

To get the box on desktop view, you can add this:

.single-tribe_events .tribe-events-schedule {
background: #fafafa;
border: 1px solid #eee;
margin: 18px 0 8px;
padding: 12px;
}

This gives the same look as on mobile (see screenshot). Let me know if that helps and if you have any questions!

Thanks,

Jennifer

[Tim Brown]

Hi Jennifer,

many thanks for your reply.

You CSS works perfectly, just what I needed.

I do wonder why this stopped working in the first place (it didn’t display this behaviour when I first installed TEC), however that seems academic now.

Thanks again,

Tim

[Jennifer]

Awesome, I’m glad that the CSS worked! I’m not sure why it changed, but I was seeing the same thing as you on my end with Storefront. I’ll look into this a bit further and see if a styling tweak may be needed on our end.

Since this has been marked “resolved”, I’ll go ahead and close it out. Feel free to open up a new thread if you run into any other issues!

Thanks,

Jennifer

[Author]

Posts