Tribute Page - Ol' Billy Freckles

Tribute Page - Ol' Billy Freckles
0

#1

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.


#2

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.


#3

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:


#4

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


#5

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: