Streaming live at 10am (PST)

Weird issue with heading going on two lines


#1

Hi

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.

Graham


Here is my public share link: LINK
(how to access public share link)


#2

Can you post a screenshot of the issue or a link to the site where the issue is happening. In the designer, everything looked fine.


#3

@jdesign

Thanks for your quick reply.

ipad mini screenshot of live site
screenshot of share link using google chrome
the site is http://www.grahamcoxppc.com. It seems dependent on what screensize you are viewing it on. The live site in Google Chrome on a 20" screen displays the headline ok for me.

Graham


#4

Hey guys, @GrahamCox and @jdesign

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.

You can see it on video pretty clear: https://drive.google.com/file/d/0B-7cg8BSq1Z_NTZXNDFBd2lzY2s/view

There is few ways to fix it:

1) make links size depend on browser width (% or vw)
2) make logo size depend on browser width
3) make navbar height not fixed (auto or height in %), but navlinks will "jump" down anyway)

Regards,
Anna


#5

Hi @sabanna

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.

2 - What is vw?

Many thanks

Graham


#6

Hello @GrahamCox

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.

Regards,
Anna


#7

Hi @sabanna

Thanks very much for the explanation. I'll try that in the future.

I actually seemed to fix the issue just by putting some margin above the h1. That seems to have done the trick.

Graham


#8

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.