Hi,
I set the blog page (homepage) in this way: https://ibb.co/hAKng6
– first blog post: single author, big img
– the others: grid 2 column
The issue is using mobile because there is no enough space for title: https://ibb.co/bKgTom
So, I thought I could hide this on mobile and create a new visible only on mobile using a different layout but it seems not to be a good solution, it overload the server and make roundtrips and data usage for nothing.
Is there the way to split the 2 column into one column when the website is seen on smartphones? Or something that could solve the issue.
Thank you, for everything, Filippo
Just solved the issue.
I can solve in 3 ways:
1) My choice: add this lines into CSS: it will resize the title size on smartphone and prevent the problem.
@media only screen and (max-width: 480px)
{
h3.slide-entry-title.entry-title { font-size:20px!important; }
}
2) I don’t like so much the result but it works: split the 2 column into one on smartphone.
@media only screen and (max-width: 480px)
{
.flex_column { width: 100% !important; margin-left: 0 !important; }
}
3) This works also but it need to download twice the contents: open the screen option and check into the two column grid list “hide on very small screen”; then create another list using single author big img and check everything except “hide on very small screen”.
Hi,
Great, glad you got it working and thanks for sharing your solution. Please let us know if you should need any further help on the topic or if we can close it.
Best regards,
Rikard
Can clode, thank you.