Tribute Page Help and Feedback - Ted Lasso

Hi everyone!

Code newbie here…about 3 weeks into my coding journey, totally self taught mainly here on FCC.

“Finished” my second project, but I am still having some issues that I can’t resolve on my own. I have googled and searched and I still can’t get it to work . I also ran my code through a validator this time based on my last feedback. Here is the link to the project:

Ted Lasso Tribute Page

The more I played with my CSS, it seemed the more I screwed it up, so I figured I’d stop and ask for help before I screwed it up more.

My issues:

  • The links in my nav bar were bleeding of the page, but now they are not in the correct order and they are stacked instead of in a line.

  • The links in my nav bar are now taking you midway through that section instead of at the top

  • I can’t figure out how to get the images in my gallery to come under the h2 element. “Best Show Moments”

  • In my footer, the link is showing without a space between the and Ted

There are probably more issues I am not seeing…but that’s what I am seeing that I can’t correct. I’d love some help or advice. Thank you everyone!

maybe you can focus on one issue?
for eg. if we look at:

You can give more information about how to recreate the bad behaviour?
(I just clicked on the codepen link and I am not sure how to make things go off the page)
Also describe what the expected/correct order is?

Ok, so I removed “display: float” and now they are back in order, but Emmy is now going off the page. I tried adding overflow:hidden and that didn’t fix it.

Hi, I can help you with some issues:

Headline/Images
Remember that flex has a second possible direction.

Missing HTML space
This will solve the problem:

I tried to fix the nav, but you probably created an AI :laughing:, a pretty stubborn one. Best build the header and nav from scratch and make it simple: a logo/ title and a few <a> links in a div are enough in most cases. I was over-engineering them too when I started out.

Thanks! That was helpful. I was able to fix a lot of my issues. I think the big issues was position: fixed. I removed that and now my links are working correctly. I’d love it to be fixed, but when I add that, then when you click the links, it takes you mid way through the section and I don’t know how to fix that at this point.

The other issue is that I can’t get the nav bar on the same line as the h1 element. I had fixed that before, but now I can’t get it to work. The other issues have been resolved though…

Ted Lasso Tribute Page

  1. You can make the header a flex container. Right now the two child elements are both block-level elements and will never sit on the same line. Flexbox can also vertically align the elements using align-items and use justify-content for space distribution, and you also get to use gap.

  2. You can use scroll-padding-top on the html element to offset the scroll position by the height of the fixed header.

html {
 scroll-padding-top: 150px;
}
  1. Your @media rule at the top isn’t closed and it is auto-closing around everything (in chrome at least). It should only contain one selector with the prefers-reduced-motion feature.

You have this:

@media (prefers-reduced-motion: no-preference) {

* {
  font-family: futura;
  scroll-behavior: smooth;
}

I would suggest this.

box-sizing on all elements
scroll-behavior only on the html element
font-family on the body.

You can use font-family: inherit on elements that do not inherit it by default. Setting it using the * selector works as well just don’t have that selector inside the @media rule otherwise people with that preference set will not get the font.

* {
  box-sizing: border-box;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  font-family: futura;
  margin: 0;
  background-color: #f7f6f4;
}
  1. Use max-width on the .img-div not width otherwise the element will overflow the page.

  2. I would suggest adding containers around your text and limiting the width. Your text shouldn’t be full page width as it makes it much harder to read. Keep the line length down to about 90 characters per line.

Wow @lasjorg , that was so helpful. I have been stuck on this for nearly a week trying to problem solve on my own and then seeking advice.

I used all your tips on 1-4 that you listed and that helped solve all the issues I was having. I think my header/nav is now finally working as I wanted it to except that I wanted the h1 title to more centered on the left side of the header and I can’t figure that out…but that feels like peanuts after all the other issues I was having.

I struggled my way through this suggestion. You are totally right that it was hard to read, not sure how I didn’t even recognize that. What I ended up doing was setting a class of text to all of my divs that had text in them and then adding this css

.text{
width: 80%;
margin: auto;
padding: 40px;
}

There may have been a better/easier way, but I think it definitely improved the text areas.

1 Like

Looks much better, good job.

You can add some margin left to the h1 if you want it positioned more to the right.

The Futura font you are using is likely installed on your system (Mac?) but it won’t be on all systems, like Windows for example. I would pick a Google web font to use instead. Something like Nunito might work well with the theme.

I’d suggest increasing the overall font size and positioning the h2 headings closer to the content they belong to. Also, create some more vertical space between each section.

As an example, I removed some padding and replace it with margin as well.

body {
  margin: 0;
  background-color: #f7f6f4;
  font-family: Nunito, futura, sans-serif;
}

p, ul {
  font-size: 1.6rem;
  line-height: 1.4;
}

h2 {
  text-align: center;
  color: #021e73;
  font-size: 2.4rem;
  margin-top: 6rem;
}

I know it might seem very large at first compared to what you have now, but give it some time and try coming back to the page after a bit. I think you will find it more pleasant to read at the larger size. You can obviously adjust it to your liking.

If you make the typography stand out more and turn it into a feature of the page the text blocks will serve as visual elements. Even without reading the text, it becomes more interesting to look at.

Correct, I’m on a mac. Good to know about Futura. To be honest, I googled Ted Lasso fonts and futura worked here on FCC, so that’s what I went with. So it’s good for me to keep in mind the back up fonts and choosing one more available on most devices.

I really appreciate all your help and feedback @lasjorg . It really helped me learn and improve this project a lot. I’m sure I’ll be back in a few more days for the next one.

It is also why you should have a fallback font like sans-serif at the end of the font list. That way if none of the fonts work the browser will just use the system default font for that font type.

The benefit of the web font is that it will work for pretty much everyone because if they can load the page they can most likely load the font (There might be some edge cases where the web font is blocked).

You can also use a pure system font stack as well.