Off to a rough start with the header

I have created a header, which has text that is centered vertically, and I created a style for it with the Lato font face. When I preview it, the font changes to something else, and when I view the resuable element, it looks fine. Once I go to the index, however, it doesn’t vertically center anymore.


So at least on my browser, the preview is displaying the font as Lato. Do you know which font is displayed instead of lato on your browser?

I can’t modify your app so not sure if this’ll work but try setting the element to fixed-width (my go to first step for uncooperative responsive behavior). Or else try reducing the text container’s height?

This is how it looks in my browser on the preview:

Not sure what font that is. It looks OK in the app itself. Also, it isn’t centering vertically. I will try to turn off responsive.

Oh yea, it’s like falling back onto a serif font. That’s kind of strange.

Not turn off responsive, but make the text element container fixed width. Or gimme dev access and I’ll fix it real quick for you then show you how.

Also, cool app idea, I remember growing up my dad always made a big stink about cancelling his ifr plans. Can’t wait to see the finished product :slight_smile:

OK, you can edit now.

It’s going to be like Glassdoor, but for pilots. A big player in the industry is a place called climbto350, but it’s junk.

Right on, stay in touch with me, when you get something minimally viable up I might be able to shoot it to some influencers I know.

Anyways, take a look at that. Does that solve the centering issue?

Definitely fixed the centering issue. Still not showing the right font. Not sure what the issue is. I am using Chrome on Ubuntu. I’ll let you know when the site is up. I have built almost entire thing in Drupal, but it is too limited and I was relying on way too many modules. This looks like a better way to go.

Ok cool, so all I did was adjust the container height of the reusable element on your index. It was too short to contain the defined height of the reusable element (header) so it was cutting off the bottom.

Regarding the font, my understanding is that CSS will fall back onto different typefaces if the requested font isn’t installed on your system. Since lato is one of the most frequently used fonts, I can’t imagine it’s not installed on your system.

My 7 year old uses my Ubuntu machine better than I can but the issue might be there. Lato is loaded properly on any other website you use, yea?