I have a weird issue where the h1 text (Get The Results From Adwords You Always Hoped For) on my site keeps going onto a second line after just a couple of words. You can see it at my share link below.
I noticed if I removed the H1, that the same thing happened on the H2 sub head beneath it too. Looked at my settings and they all look ok, so at a loss.
If anyone could remove the fog I’d really appreciate it! Many thanks.
I think I know why it happens. Problem in menu. When screen/browser become smaller than 1170px there is not enough space for all links and logo staying in one line. Since links wrapped with nav with float:right settings, it moves down, stick to the right side of the page and as result part of the header moves down too.
Thanks very much for your help with this and posting the video.
I’m not the most skilled developer so could I get clarification on a couple of things please:
1 - How do I make links or logo size depend on browser width? I mean I can adjust them based on desktop, tablet, phone etc, but for example on desktop the nav links are already 13px and any smaller than that will look too small I think.
CSS3 has values for sizing things relative to the current viewport size: vw and vh
One unit on any of this values is 1% of the viewport axis. “Viewport” = browser window size = window object.
For example, if the viewport is 40cm wide, 1vw = 0.4cm.
1vw = 1% of viewport width
1vh = 1% of viewport height
You can use this type of measurements with font size or any other object size.
For use it in Webflow you have to simply type vw or vh right after digits and press enter. Webflow app will accept it.
By using this measurements you can make object width depend on browser width, also make font size depend on browser width if you will use vw in its size.
