Tribute Page without Bootstrap

Code Feedback
1

I’m doing the tribute page, but trying to make it responsive without bootstrap.
The current problems I have are:

  • that the image doesn’t resize well when changing browser window size (i.e. background image top and bottom gets cropped)

  • The heading and subheading are too high for my liking and I want them a bit lower down.

Any feedback and help appreciated.

Here’s the codepen for the project: https://codepen.io/rna7/pen/vpgegV/

2

that the image doesn’t resize well when changing browser window size (i.e. background image top and bottom gets cropped)

If you want to keep your code as it is, the only solution is playing with media query, your background position and the height/padding of your container.
The line background-size:cover; is specifically instructing your background image to cover 100% of the width and the height of the container (header in this case). This would mean that some cropping would be needed sometimes, in other words, expected behavior.

What I would do to acquire more control on the display of the image is remove the line with background-size: cover; and regarding the media query rules, this is how it could look like.

header{
  background: url("http://vytc.com/wp-content/forum/uploads/2012/08/lightning_header.jpg") no-repeat  center/0;
  background-size: 100% auto;
}

  @media screen and (min-width: 420px) {
    header {
      background-position: center -50px; 
    }
  }

  @media screen and (min-width: 768px) {
    header {
      background-position: center bottom; 
    }
  }

What I see here is that it’s a volatile solution, we can’t really control all screen sizes. The real problem with your image is that that’s what it is, a background image, the height of the title it’s what’s defining the height of the image.

What I would assume is that it seems like a better idea to do it the other way around and let the image dictate the height of your container. Here’s a fork that does that with your project https://codepen.io/vagui/pen/Mrpzjo

Main differences:

  • Usage of table and table-cell as display values
  • Refactor of your header element to
    1. Take your headers out of the document flow and locate them at the top-left corner of your header
    2. Locate your headers at top of the image
    3. Center the headers vertically
  • Removed legacy code that messed with the vertical alignment

The heading and subheading are too high for my liking and I want them a bit lower down

If you analyze the codepen I think you’ll realize that you can add padding to the holding container. Right now you shouldn’t have alignment issues, but if you want to align them on top or bottom, play with vertical-align and padding.

header > div > div{
  padding-top: 30px;
  vertical-align: top;
}

Hope it helps

3

Thank you for this. Just what I’m looking for.

I will really need to sit down with your code now to really understand what’s happening.

4

Yeah sorry for that, there isn’t an easy way to show 100% of the image always and having text on top of it.

I updated the codepen with some comments of what is it doing, probably the most advanced thing there is display: table; (which you can read about it here) and position: absolute / position: relative. You can read about it here.

Hope it helps

5

Wow. Thanks so much for this. You are truly amazing. The level of detail in incredible. I’ve only recently started learning webdev, but if everyone in the community is like you then wow.

What’s your experience like with web development and coding?