The text in Big Grid 12 and Block 11 on various pages.
It’s fine on desktop but too big on mobile. How do I reduce it?
Hello,
On mobile the fonts can only be changed through css so please use this code to change them:
for the big grid:
@media (max-width: 767px){
.td-big-grid-post.td-big-thumb .td-big-grid-meta .entry-title, .td-big-grid-post.td-medium-thumb .td-big-grid-meta .entry-title {
font-size: 16px;
}
}
for block 11:
@media (max-width: 767px){
.td_module_10 .entry-title {
font-size: 16px;
}
}
Thank you!
Great, thank you. It works perfectly for the block, but the big grid font size is still unchanged?
Try to change the 16px size. It should work fine. Please also check if you do not have a big red x in the custom css box as it would indicate an incorrect code. Maybe you have an un-closed tag in your previous css.
Thanks.
I’ve changed the 16px size but it’s still not showing. No big red x in my custom css box. In the phones css box, I see an ‘info’ icon saying “Don’t use adjoining classes.”
My custom css: https://snag.gy/DZFhuM.jpg
My phones box: https://snag.gy/KuXnOS.jpg
My mobile site: https://snag.gy/1F0dSw.jpg
You have a custom size for module mx 5 and mx 11 as well in your theme panel. Please remove it and leave it on default.
Please restore these 2 values to default or remove any custom code you may have affecting them.
Thanks
Sorry, where do I change this? Apologies, I’ve only been doing this three weeks.
Hi,
I think this is somewhat of a misunderstanding. If you would like to display a smaller font size on mobile for the article titles in the big grid, use something like this
– https://www.screencast.com/t/V8Y2HOsw6
Please remove the previous code related to the big grid (leave the one for the block), and enter this one in Theme panel->Advanced CSS in the phones section
.td_block_big_grid_12 .entry-title a {
font-size: 12px;
}
Please let us know if this is a solution in this matter.
Thanks
Ahh, perfect – that’s fixed now. Thank you.
Do you have the code for iPad, too?
Hi,
Using the provided Advanced CSS sections, you could create code for each device or width size. For example like this a different font size is set for each instance
– https://www.screencast.com/t/Qx7UL1Rpd
You just need to modify the font size and use the same code.
Thanks
That’s great, thanks.
Although, on phone, is there a way of only increasing the article title font in the bigger box in Big Grid 12 (keeping the smaller boxes’ font as they are)?
Hi,
You could do that. It would require the code to be more precise, like this for each module of the Big grid
– https://www.screencast.com/t/8j9CKkRHi
– https://www.screencast.com/t/tk1qPHObn
.td_block_big_grid_12 .td_module_mx5 .entry-title a {
font-size: 25px;
}
.td_block_big_grid_12 .td_module_mx11 .entry-title a {
font-size: 16px;
}
Use the values you want in the code for the font.
Thanks
Perfect, thank you!
