When I scale my window, the Titles get beneath eachother. Is there a way to make the titles smaller when an window is made smaller (or an other solution to make the design still look good)
: http://www.screencast.com/t/arm5ekKslVP0
Thanks
Hi,
If that is a page and theme block, note that the font settings available in the tagDiv composer can be different by device. So you can set a font size for desktop
– https://www.screencast.com/t/BNzGapj9
And one for mobile – https://www.screencast.com/t/x1xjUvvAcxr
These settings are not available in WPBakery page builder.
If you use WPBakery you could use CSS to set differ font sizes by width, with media queries. An example topic
– https://forum.tagdiv.com/topic/how-to-manage-the-fontsize-for-better-responsive-text/
– https://forum.tagdiv.com/create-custom-code-using-the-browsers-inspector/
Thanks
Sorry Simion, I ment the main bar title. not The theme blocks. When I scale the window the titles won’t get smaller and get beneath eachother : http://www.screencast.com/t/aRf7JeSe
Desired result : http://www.screencast.com/t/vZLUFq2nZm
thanks.
Sorry for misunderstanding. You could use a media query to decrease the margin of the menu items and font size
– https://www.screencast.com/t/3q2U1qGg
This is the code used in the example, you can make modifications to it if needed and test
@media (max-width: 1180px) {
.td-header-style-8 .sf-menu li {
margin-left: 10px;}
.td-header-style-8 ul.sf-menu > .td-menu-item > a {
font-size: 30px;
}}
I pasted the code, but it doesn’t seem to work
The code will simply reduce the font size and also a little from the margin of the menu items, when the width is getting smaller, it may need modifications.
But it seems you also have additional code that applies to the header menu. On mobile it looks like this for me at the moment
– https://www.screencast.com/t/VzQ336hvFa
Use CSS carefully, or it will break the design. Use the Advanced CSS sections to enter code to affect specific devices only. I don’t know exactly what you want to do with the header menu, how you want it to look.
