4 replies · opened Feb 16, 2019
You people know it: Canvas has wonderfully working templates!
Everything is fine, but one problem causes headaches: A long word in the page title ("h1") in Parallax-DIV is not reduced responsively for smartphones. What has to be done where?
Hello,
Thank You so much for the Kind Words! :)
We do understand about the H1 Text Size Scaling Issues, and we are already working on an Update to ensure that this works gracefully. However, in the meantime you can consider using the Responsive Styling to fix this issue. Simply add the following CSS Code to control the Font Size:
.device-xl #page-title h1 { font-size: 28px; }
.device-lg #page-title h1 { font-size: 26px; }
.device-md #page-title h1 { font-size: 24px; }
.device-sm #page-title h1 { font-size: 20px; }
.device-xs #page-title h1 { font-size: 18px; }This will definitely work fine. The Responsive Classes are as follows:
.device-xl – Class for Large Devices >=1200px
.device-lg – Class for Medium Devices >=992px to 1199px
.device-md – Class for Tablets
.device-sm – Class for Landscape Mobiles or Phablets.
.device-xs – Class for Portrait Mobiles
You can use the above code for other Elements as well.
Hope this Helps!
Let us know if we can help you with anything else or if you find any further issues.
Many thanks for the solution!
In the meantime I have chosen the way via "vw".
Example: <h1 style="font-size:5.5vw;">
That's not as elegant as your way, but it works.
Supplementary:
"vw" = Volkswagen
Your code = Rolls Royce
;-)
Hello,
Haha! We are actually planning to use vw for the Header Font Sizes, since they make it easier to manage and also decreases the codes by a considerable amount.
Thank You so much again for your Kind Words and your Valuable Patience!
Do let us know if we can help you with anything else or if you find any further issues with Canvas.
Have the same question, or something new?
Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.
Reply on the dashboard