Tribute Page - Ol' Billy Freckles

First FCC project, but not the first one with HTML/CSS. Trying to get back up to speed with front-end and learn JS as it used to frighten me before :slight_smile:

Ol’ Billy Freckles

Any feedback is appreciated.

I like the design, looks good. The layout does need a bit more fine-tuning on the responsive side of things.

  • At 731px the title “collapses”, giving it a line-height would partly fix it.

  • At 615px the “I’m Sorry You Feel That Way” poster breaks the list, reposition or remove it.

  • At small screen sizes the background image no longer fits and you lose a lot of screen real estate, i would suggest switching to a more bare-bones layout on small screens.

Anyway, nice job.

Fixed some scaling issues. Seems to be fairly responsive now. However pulling it up on my phone Galaxy S8 does something odd when scrolling:

Here’s what I got for CSS which should reposition the background and resize main content to 90%. Works great on the desktop, not on an actual phone though.

@media (max-width: 812px) {
body, html {
    background-position: left bottom;
}
#main {
    max-width: 90%;
    margin: auto;
}
}

Any ideas? :roll_eyes:

Figured out the background issue along with content not scaling to 90% on my phone. Forgot to add only screen to the media query :man_facepalming:

@media only screen
    and (min-width: 375px)
    and (max-width: 1080px)
    and (orientation: portrait)

The white space at the bottom though is still there. As soon as the address bar hides in chrome, the white space pops up. Anyone have a solution for that?

Also images are not scaling to 100% for some reason with these defined:

    display: block;
    max-width: 100%;
    height: auto;

image

Got it worked out. Had to change images from max-width to min-width, scaled those right up. Jumping address bar in mobile Chrome got resolved by setting height of the element with the background to 100vh, unfortunately iOS is a pain to deal with that issue. More on that here https://stackoverflow.com/a/25020295

If anyone’s interested in looking under the hood without busting out their trusty dev tools - https://github.com/kgeno/fcc-projects/tree/master/tribute

I think I’m completely done with this project, unless there are more suggestions :slight_smile: