Month View in mobile – column headers not aligned properly

[eastbayaa]

When I look at our Event Calendar in month view on mobile, it looks fine when the mobile device is rotated and held horizontally, but in the vertical position (smallest viewing of the calendar), the column headers (MON, TUE, WED, … are not aligned properly within their columns – they sort of overlap to into the next column. Is there something that can be done to fix this?
Here is a link to my dev site calendar: http://69.195.124.167/~eastbbc2/events

[Brook]

Howdy eastbayaa!

I see what you mean. It looks like your theme’s CSS file is conflicting here. Add this bit of CSS somewhere to get things fixed up:

#tribe-events-content table.tribe-events-calendar th { padding: 9px 0; }

Cheers!

– Brook

[eastbayaa]

Hi Brook, when you say add this CSS “somewhere”, where exactly should I put it? Can you be a bit more specific? Thanks.

[Brook]

For sure! It can go anywhere, in anyone of your existing CSS files. If you do not already have any CSS you have added to your site, then you would most likely want to look into creating a child theme and adding it to the child theme’s CSS.

– Brook

[eastbayaa]

Hi Brook,
I added that code to my functions.php file in my child theme and it had no effect. Problem still exists. Do you have other suggestions?
Thanks.

[eastbayaa]

Nevermind… I added it to the style.css file for my child theme and it solved the problem. Thanks so much!

[Brook]

I am glad you were able to get that sorted. You are very welcome. If you need anything else in the future we would love to assist. Cheers!

– Brook

[Author]

Posts