Hi
We use block 13 for our newest article on the front page. We sometimes like to use extremely long titles of out articles, and when we do so block 13 show the title more or less over the entire front page on mobile devices. On computers it looks ok.
Is it possible to shorten the length of the title showed to two rows for block 13 on mobile devices only? Or do you have another solution? We want to keep the same look on mobile devices as on the computer.
http://www.ladiesabroad.se/, I have an example published right now.
Hello Ladiesabroad,
I have inspected your source page and I saw that you have some custom CSS code which overwrites the default theme settings as you can see here -> https://www.screencast.com/t/lWHPRSYBGYEs If you want to achieve good results for mobile devices, you should adjust the font-size and line-height using the media querries.
Thanks for the message!
Hi
Yes, we have several custom CSS. But they are all provided by you and your colleagues; meaning I am not a developer. From googeling I assume media queries are custom CSS as well, so I again ask if you kindly can provide me with the actual code.
If it is done in the theme panel, please advise which section and how to do this.
Thanks.
Hi,
A solution would be to use the Advanced Custom CSS sections in the theme panel. I believe you want the solution provided for the title is how you want it for desktop. For mobile you could use a code like this to reduce the title size
– https://www.screencast.com/t/pBSM1NyPE
You could even center the title on mobile if you wish
– https://www.screencast.com/t/O746D9ag2Rm
This is the code used in the example, enter it in the Advanced CSS->Phones section (remove the center align if not needed)
.td_module_14 .td-module-title {
font-size: 24px;
line-height: 28px;
text-align: center;
}
There are also excerpt settings for all modules but those will affect both desktop and mobile situation
– https://forum.tagdiv.com/excerpts-introduction/
Thanks
