Fotomatic Project Font & Footer Problem

Get Help CSS
#1

Hello,

I’m working on the debug project (Fotomatic) and I have a few questions/issues.

  1. I can’t understand why the font for the entire html element won’t be set to Roboto even though the tag on the styles sheet is set to html to Roboto.
html {
  font-family: "Roboto", sans-serif;
  font-size: 16px;
}

If I want the page to look like the final product I have to go in to each tag where the font Roboto should be set and set it up individually. Should’t all of these tags inherit the font from their parent element (html element) since no font-family was specified? Am I doing something wrong here?

header .logo {
  flex: 1;
  font-family: "Roboto", sans-serif;
}

nav a {
  vertical-align: bottom;
  line-height: 1.6;
  font-size: 1rem;
  color: #4a4a4a;
  font-family: "Roboto", sans-serif;
}

.feature .content{
  padding: 2.5rem 0;
  font-family: "Roboto", sans-serif;
}

#filters-section .content {
  padding: 0 .625rem;
  margin-bottom: 5rem;
  font-family: "Roboto", sans-serif;
}
  1. For the footer, I can’t get the browser to display the padding. Checked with Chrome DevTools all the styles for all the elements on the final product and they match with the ones I have. Even then the paddings aren’t applied.
type or paste code here
1 Like
#2

Hello @andresuriegas, welcome to the forums! Could you post a screenshot of your webpage, please? Also, is there any CSS code for the footer?

As for the font, try using * instead of html. In my experience, * (which stands for all) is a better selector than html.

#3

It seems like I didn’t have to do anything to get the fonts correct except link the stylesheet to the html. Most of my styles show as Roboto when looking in Dev-tools - Computed - font-family. But I did not go through the spec document in great detail to verify every single one.

I also don’t remember the #footer requiring any bug-fixes. But make sure that you have fixed the section above the footer (#quotes-section) as that may play a role. I think it had some class-names in combinator selectors that were not named correctly (should be .class-name).

2 Likes
#4

Hi,

I’m having the same issue with Roboto. The other 2 fonts used in this design are displayed fine right out of the box, but Roboto doesn’t, in spite of the html being instructed to use it. changing to * instead of html doesn’t do a thing either.

Somehow, I found that messing around with reset.css can fix the problem, either by removing the “font: inherit;” property in the first selector, or by specifying the font in the same selector - or any other appropriate one, such as body, a, or whatever.

Still, while I did find a workaround, I want to understand why it’s not working in the first place, so any help would be greatly appreciated.

#5

I just figured this problem out!!! I was having the same problem. I found out that when you are linking to multiple stylesheets with the same specificity, the last one wins out. So in other words if you put your link to style.css before the link to reset.css then the last stylesheet wins out. Simply make sure that the link to style.css is after reset.css and your fonts should work a lot better.