Trying to make font bigger

landrenic · February 2023

Hello. I’ve installed Events Calendar plugin on my site. I finally have it working properly. However, on this page https://folsomla.com/events/community/add/ when you add in information for a new event, the type is very, very small. The plugin support said the theme is over riding settings. Where and how can I change this (what CSS do I need to change) so this text is more legible?

Thank you in advance.

Pablo · February 2023

Hello,

We'll change it using the CSS code, no problem.

But, tell me which inputs do you want to increase the font, all of them or only few (like textboxs only)?

Thanks

landrenic · February 2023

Thank you.

If you go to the page and look at the text size of

(required)

Under EVENT TIME & DATE:

Start/End and the associated dropdown when you click in the date and time field

“to” “All Day Event” ‘Recurring Event” all the text and input features when you click “Schedule Multiple Events"

EVENT CATEGORIES: When you click in the search field, all the options are tiny

EVENTS STATUS: set status dropdown the text is tiny

VENUE DETAILS: “Venue” and the dropdown “Create or Find a Venue"

EVENT WEBSITE: “External Link"

EVENT COST: “cost” and “Leave blank to hide the field..."

TERMS OF SUBMISSION: all the text in the text field is tiny and “I agree to the terms..."

...basically all the text that is not in bold capital letters needs to be at least two points larger

Phil · February 2023

Hi,

Please, use the following CSS code:

#tribe-community-events label,
#tribe-community-events .tribe-section-datetime tr td input,
#tribe-community-events .tribe-datetime-separator,
#tribe-community-events .recurrence-container span,
#tribe-community-events .selection input,
.select2-results__options li.select2-results__option,
#tribe-community-events #select2-tribe-events-status-status-container,
#tribe-community-events #select2-saved_tribe_venue-container,
#tribe-community-events #EventCost + p,
#tribe-community-events .event-terms-description{
   font-size: 16px!important;
}

Thanks

landrenic · February 2023

Thank you.

I put that in the custom css area and it does not appear to have changed anything. I flushed the cache and cleared my browsers as well.

Phil · February 2023

In which custom CSS area did you put it?

Betheme -> Theme options -> Custom CSS & JS -> CSS?

Best regards

landrenic · February 2023

Yes that is where I put it

Phil · February 2023

I can see that the CSS is present on your website, and it works.

To show you that it works, I modified the value in the developer tools:

Best regards

landrenic · March 2023

Screen Shot 2023-03-13 at 9.05.09 PM.png

No matter what browser I use, this font size in the selection window is very tiny.

Phil · March 2023

Please also add the following code:

.ui-timepicker-wrapper ul li{
   font-size: 16px!important;
}

Thanks

landrenic · March 2023

That worked thank you!!!!

Trying to make font bigger

Comments