Tribute Page - code review

Tribute Page - code review
0

#1

I’ve never been to good with condensing with or keeping up with my html code. I always start off somewhat strong and end up wondering what this item does or how it affects my page. I’d like help on seeing if there’s some specifics of what i put in here. And I’m fairly new to coding, so forgive the rookie stuff :frowning:


#2

i forgot the link xD


#3

Since you are using Bootstrap 3, I would recommend using the class “img-responsive” with your img element. Without it, on a smaller screen device the image overflows out of the div with class=“well”.

Also, I would add the following to the #image css, so the image takes up the full width of the div with id=“imageCaption”

  width:100%;

Another suggestion I have, would be to either change the #imageCaption margin-left and margin-right to 3em or 4em or leave them both a 9em and the following media query, so that on smaller screens, the container for the image does not get too small to see.

@media only screen 
  and (min-device-width: 320px) {
  #imageCaption {
    margin: auto 0;
  }
}

My final suggestion is to replace your body selector with the following:

body {
  background: url('http://visitclarksvilletn.com/clientuploads/directory/famousPeople/Hendrix-2.jpg') center no-repeat;
  background-size: auto 100%;
}

This will center the image horizontally and vertically and the allow it to grow vertically to 100% of the page’s content. Before, when the screen width shrunk (when on a mobile device), the background image did not cover the entire page.


#4

Hey, just fixed it up like you said. Thanks a lot for all that, I really wondered how to maintain viewing of the page and just couldn’t figure it out. Really helpful :slight_smile: