I've got a blog homepage where I'm using a bunch of 2/3 columns to put the latest blog post in certain categories using Meta Overlay and Large Featured featured images. On some Android phones, in portrait, longer blog post titles get cut off at the top.
How can I write a media query that can make either the "post-header" class or the h2 class="title" smaller/fit for sure on all mobile devices?
We're happy to limit blog title to a certain number of characters, but we also need the flexibility to have titles as long as our first post on the home page.
Things look good on the iPhone 7 plus, but not on the Android phone I tested.
Hello!
I've got a blog homepage where I'm using a bunch of 2/3 columns to put the latest blog post in certain categories using Meta Overlay and Large Featured featured images. On some Android phones, in portrait, longer blog post titles get cut off at the top.
How can I write a media query that can make either the "post-header" class or the h2 class="title" smaller/fit for sure on all mobile devices?
We're happy to limit blog title to a certain number of characters, but we also need the flexibility to have titles as long as our first post on the home page.
Things look good on the iPhone 7 plus, but not on the Android phone I tested.
Thanks!
Hey Matthew,
I believe this is what you are referring to :
Add this into the Custom CSS box located in your Salient Options panel (Make Sure there are no red cross in the Box) :
@media only screen and (max-width: 470px) { body .masonry.meta_overlaid .masonry-blog-item.wide_tall h2.title, body .masonry.meta_overlaid .masonry-blog-item.large_featured h2.title { font-size: 16px!important; margin-bottom: 0px !important; } }Thanks
ThemeNectar Support Team