Hi,
I need different font size in desktop than on mobile,
is there a way to create content that will be shown only on mobile and the other way?
Thanks
Tal
Hi talelie!
You could use CSS to hide elements on mobile / desktop but it would probably be better to just use CSS to change their font size.
@media screen and (max-width: 767px) {
}
Add your CSS inside that and it will only be applied on small screens.
Regards,
Elliott
Hi Eliot, I have tried this CSS, but it does not effect the ‘text block’
can you please see it here: http://sites.wiseway.co.il/valuecard
Thanks
Tal
Hey!
You will have to assign a class, inside the media selector and then, added to any module.
Here are some more info:
https://css-tricks.com/conditional-content-via-css-media-queries/
Please let us know if you need more help
Cheers!
Basilis
Hi Basilis,
I have place an ID for the color section,. but still does not work.
Hi!
If following code does not work
@media only screen and (max-width: 769px) {
#your-custom-id { display: none !important; }}
Please create a temporary admin login and post it here privately.
Best regards,
Yigit
Hi Yigit, I do not want to hide it from the mobile, I just want that the text area, will be shown in smaller font size while on mobile.
I have managed to do so with the “special heading” but not with the “text area”
Thanks
Tal
Hey!
I’m not sure which textblock your referring to but you can use this to change the font size for all textblocks.
@media screen and (max-width: 767px) {
.avia_textblock, .avia_textblock * { font-size: 12px !important; }
}
You can also do this, http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/, to give them each a class to target with. Or use the color section ID they are placed in.
Regards,
Elliott
Hi Elliott, It works great!
Thanks