Width event-single on mobile devices

[Nicolas]

Hi,

I customized .tribe-events-single so it could be centered on desktops pages (without the code below, each individual event entry would use the screen’s full width –> doesn’t look great with the theme I use).

This is the code I integrated in my site’s CSS:

.tribe-events-single {
max-width: 70% !important;
margin-left: auto;
margin-right: auto;
}

However, the downside is that this applies to smartphones too, and in this case, the content is not wide enough.
My question: What can I add to the code above, so it applies only to desktops (or screens above XXX px)?

Thanks in advance for your guidance.

[Geoff B.]

Good evening Nicolas and welcome back!

Thank you for reaching out to us.
I would love to help you with this topic.

The key is to use the good old @media CSS rules

I would personally recommend simply setting a different rule for mobiles

Try adding the following CSS rule to your style.css file or in your Custom CSS metabox:

@media only screen and (max-device-width : 736px) { .tribe-events-single {
max-width: 90% !important;
}
}

If, for some reason, it does not kick-in, simply add another class or ID in the path to the container (making the CSS rule more specific).

Let me know how that goes.

Best regards,
Geoff B.

[Nicolas]

Hi Geoff,

It worked like a charm! Thanks a lot!
Well, that good ol’ @media CSS rules is definitely something I’ll keep in my mind!

Once again, thanks for your (greatly appreciated) assistance. You guys rock.

Cheers,
Nicolas

[Geoff B.]

Hey Nicolas,

I am super stoked that this did the trick for you!

You are welcome back in our support forums any time 🙂

For now, I am going to close this thread.

Have a great week!

Geoff B.

[Author]

Posts