-
Posts
-
Hello!
I have a set of icon lists in 1/4 columns with only the titles entered.
On wide tablet screens, the text is cutting off (on smaller screens, the layout adjusts so there is more room, so it looks fine).
I have tried a few different things but can’t seem to find what will work. :(
What is the best way to fix this?
Thanks in advance for your help!Update: I adjusted the page layout so the columns are 1/3 which made the problem appear only on smaller tablets, and the following code in Quick CSS works to adjust the font size of the icon titles on a per-page basis:
@media only screen and (min-width: 768px) and (max-width: 990px) {
.page-id-816 .iconlist_title {
font-size:15px !important;
}
}I will have to apply it to each page separately, but at least I can get it to look right.
Is there an easier way to apply the same code to multiple pages than listing the whole snippet for each page under the media query? I have it like this for 2 pages (the 2nd one the text size needs to be smaller to fit because the titles are longer, but the rest will probably be the same as page 816):
@media only screen and (min-width: 768px) and (max-width: 990px) {
.page-id-816 .iconlist_title {
font-size:15px !important;
}
.page-id-3588 .iconlist_title {
font-size:12px !important;
}
}If so, let me know.
Thanks!
Hi,
Please enable the custom css class field: http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/ and then edit your icon list elements and give them a custom CSS class and change the code to following one
@media only screen and (min-width: 768px) and (max-width: 990px) { .your-custom-class .iconlist_title { font-size:15px !important; } .your-custom-class .iconlist_title { font-size:12px !important; }}Best regards,
YigitI thought maybe there was a way to batch the page numbers, did not even think of using custom classes for this.
Now I know better. ;)Many thanks Yigit!
- You must be logged in to reply to this topic.