the issue is simple , the font size appears to big on mobile devices
Mar 4,2021 AT 4:01AM - 2 years ago -Hi Joao,
You can change the font size for mobile using a media query.
@media only screen and (max-width:768px){.evcal_event_title{font-size:12px;}}
Add the code above in MyEventOn > Styles. If the code does not work, navigate to MyEventOn > Settings and enable the option to “Write dynamic styles in header”.
If the code does not work even after doing that, send in a direct link to where you have your events so that we can give you the accurate custom CSS code to use.
Hi Kenneth,
I followed up every step but it didn’t work for me. First of all I’m a absolute bigenner 🙂 but I’m happy with everything except the font size on small devices. I’m working on building a new WP website (plenty of time nowadays) on a localhost base and plannig to host it in a day or two. Until now I’m using the Blisk Browser to see what happens. I send you an image from Blisk for a Samsung S7 (360×640/577ppi).
Is it the “Auto generated dynamic styles an option?
Let me know what to try out next!
best regards
JP
Hi JP,
No worries even if you are a beginner, we are here to help 🙂
I am not able to see the attachment. However, the option is in MyEventOn > Settings > Scripts and Styling and enable “Write dynamic styles to header”.
Let us know if that works.
Hi Kenneth,
Here is the link to the page that is already build www.culturalkids.pt/a-aventura-de-ulisses
I’ve done all you said, I add this code @media only screen and (max-width:768px){.evcal_event_title{font-size:12px;}} in MyEventOn > Styles and enabled the option to “Write dynamic styles in header”. and still didn’t work.
best regards
JP
You are working on local host so thats something I have no idea about so you are not a beginner
add this to
apperance>>>>customize>>>>>addisional CSS
@media (max-width: 767px) {
.eventon_events_list .eventon_list_event .evcal_desc span.evcal_desc2, .evo_pop_body .evcal_desc span.evcal_desc2 {
font-size: 12px !important;
}
}
now if that makes the desktop small as well
remove
!important
from the above css
Ok, it looks good now!
Thanks
JP