Hello,
I am using the news ticker element to show quotes. This is how I have implemented it–> https://ibb.co/h8e7bw
This looks okay on desktop, but on mobile, some part of the quote is cut off… like this–> https://ibb.co/fTDQww
1. What changes do I have to make so that the full quote shows on mobile?
2. Is there a better way of achieving this using current theme capabilities?
NB: I did not start building the site from a demo.
Hello,
Sorry but there is no simple way of making the trending now element show the full quote size because quotes have different sizes. You either get a white space when the quote does not need 2 lines of text or your content permanently shifts up and down based on the quote length. It is better to limit the title on a single row and not have any white spaces or shifting content.
Thanks.
The quotes you see is basically the post title. So the way to look at this is to think of the news ticker as it already is.
So my question is…if I limit the news ticker to show 1 post only, how can I make it possible for the full post title to show when viewed on mobile devices… because currently, some part of the title is cut off.
Hello,
If you limit it to 1 post only, then you can use this css in the theme panel-> custom css box:
@media(max-width:767px){
.td-trending-now-post{
overflow:visible!important
}
.td-trending-now-wrapper{
padding-bottom:16px
}
}
Thank you!
Thanks Bogdan, this works!
Although, I had to use a higher bottom padding to fit it all in.
Is it possible to make the padding auto-adjust to fit the post?
Sorry but css does not have such functionality. It cannot auto adjust it’s values. It is a static language.
Thanks.
