Mobile CSS

[Tommy Chamings]

Hello,

I am happy with the way my Event Calendar Pro integration works in desktop mode here
http://www.bigrockclimbing.com/sessions/

However, on mobile devices, there are large margins between the calendar elements.
1. How can I reduce the large gap between ‘Sessions for January 2016’ and the calendar?
2. How can I reduce the footer margin?

Additionally, I would like to
3. reduce the left/right page padding by 5-10px
4. How can I remove the thumbnails for individual sessions listed beneath the calendar for a specific day?
5. How can I remove the date contained within individual sessions listed beneath the calendar for a specific day?

I’m assuming that these are simple CSS changes. I just can’t find where to locate and amend the relevant CSS!

Thanks!

[Geoff]

Hey there, Tommy!

Good questions. Some of the styling may have to come directly from the theme stylesheet, but I’ll do my best to provide you the calendar classes needed. You can add all of these to your theme’s style.css file or use a plugin like Simple Custom CSS.

1. How can I reduce the large gap between ‘Sessions for January 2016’ and the calendar?

.tribe-events-month .fusion-events-before-title {
height: 15px;
}

2. How can I reduce the footer margin?
3. reduce the left/right page padding by 5-10px

#main {
padding: 55px 5px 15px;
}

#main {
padding-left: 20px;
padding-right: 20px;
}

4. How can I remove the thumbnails for individual sessions listed beneath the calendar for a specific day?

It’s kinda an all-or-nothing thing, but if you’d like to hide the images:

.tribe-events-event-image img {
display: none;
}

5. How can I remove the date contained within individual sessions listed beneath the calendar for a specific day?

.tribe-event-date-start {
display: none;
}

Does this help you get started? Please let me know. 🙂

Cheers!
Geoff

[Tommy Chamings]

Hi Geoff,

Your reply was really helpful and I’ve applied the CSS.

However, I still have an issue with padding in mobile view – there are really large margins at the top and bottom of the page. I tried adjusting the padding using #main { and this works for desktop view, but does not work for mobile view. Any suggestions on how I can reduce these large blocks of white space at the top and bottom of the calendar page in mobile view?

And finally, how do I get the ‘All Events’ link that you have in your demo for single event pages?
http://wpshindig.com/event/coffee-code-2/2016-01-31/

Thanks!
Tommy

[Tommy Chamings]

Hi Geoff,

I just resolved the mobile padding issue with the following CSS. padding top was set to 55px by default

.tribe-mobile #main {
padding-top: 0px;
padding-bottom: 0px;
}

However, some help with the ‘All Events’ link would be appreciated.

Thanks!
Tommy

[Geoff]

Heck yeah, nice work Tommy! Yeah, it’s super tricky when theme and plugin styles intertwine like that but you nailed it.

However, some help with the ‘All Events’ link would be appreciated.

Looks like your events do have the link, but it’s been customized in two ways:

• It says “Back to Session Calendar”
• It has been moved below the event title

Check your theme folder and look for a subfolder called tribe-events. If you see that, there should be a file in there called single-event.php that you can open and edit by moving the link elsewhere in the template.

Geoff

[Tommy Chamings]

Thanks Geoff!

I’m now super happy with the look of my calendar and I’ll purchase for our other climbing centre too shortly. I really appreciate your assistance and I just have one final question…

I added this text “Advance booking is required for all sessions. Not sure which session to book? Give us a call on 01908 583 128 and we’ll help you out!” to the Calendar month view page. I need to amend this text but I cannot remember which file I wrote the text into and it’s driving me nuts trawling through all the files via ftp. I can’t find it anywhere! Any pointers…?

Tommy

[Geoff]

Awesome! Happy to help. 🙂

That text can be located in one of three places:

• Events > Settings > Display at the bottom of the screen
• In your functions.php file as a snippet
• In the tribe-events/month.php template (or another template within the month subfolder)

Is it in any of those locations? Let me know.

Cheers!
Geoff

[Tommy Chamings]

content.php!

But I forgot that I added the amendment within a child theme.
All issues now resolved. Have a great day Geoff and thanks again for the excellent support!

Tommy

[Geoff]

My pleasure, happy to be of service. Thanks again for reaching out and let us know if any other questions pop up. 🙂

Geoff

[Author]

Posts