Build a Tribute Page responsive img trouble

1

Tell us what’s happening:
Hey, guys, I could use some help. I keep failing the responsive img test. It keeps coming up with this error:

1. The <img> element should responsively resize, relative to the width of its parent element, without exceeding its original size.

As you can see I defined a height, width, max-height, and max-width.

I’m new to coding so can anyone give me some advice on what I’m doing wrong?

NOTE: Removed links because I can’t post links yet “security reasons”

Your code so far

<!-- Hero IMG -->
<section class="hero">
  <figure id="img-div"><img id="image" src="/wp-content/uploads/2018/11/stan-lee-art-tributes-13.jpg" alt="colored drawing of stan lee.">
    <figcaption id="img-caption">Colored drawing of Stan Lee</figcaption>
  </figure>
</section>

==============================================================

/*

Image

*/
/I need to figure out how to size it right/
.hero {
grid-area: hero;
text-align: center;
}

#image-div {
margin-top: .5em;
height: 100%;
width: auto;
max-width: none;
max-height: 888px;
}

#img-caption {
display: none;
}

/*
Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/71.0.3578.98 Safari/537.36.

Link to the challenge:
/responsive-web-design/responsive-web-design-projects/build-a-tribute-page

2

You’re very close. Switch the parameters of your height and width of the image around :slight_smile:

(and apply it to the image itself, not the DIV it’s contained within)

1 Like
3

Thank you, I tried that but I’m still getting the error. :weary:

The image is 700x888 so switching the parameters stretched it out too much. I set it to this:
img {
margin-top: .5em;
height: 100%;
width: auto;
max-width: 700px;
max-height: 888px;
}

Which from the research I’ve done seems to make sense. But I feel like I’m still missing a puzzle piece. :thinking:

4

Set a max-width of something like 800px

5

That didn’t work either. Here is my whole code maybe I goofed somewhere else?

/*
  ========================================
  CSS Reset
  ========================================
*/
/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

body {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

/*
  ========================================
  Main
  ========================================
*/
#main {
  background-color: #f5e0c0;
  display: grid;
  grid-template-areas:
    "head"
    "hero"
    "articles"
    "footer";
}

h1,
h2,
h3, {
  color: #333634;
}

/*
  ========================================
  Hearder
  ========================================
*/
#title {
  padding: 2em;
  background-color: #d76144;
  /*for debugging */
  text-align: center;
  grid-area: head;
}

/*
  ========================================
  Nav
  ========================================
*/
/*make this a flexbox*/
/*nav {
  grid-area: nav;
  padding: 2em;
  border: 1px solid #98b2b3;
  background-color: #d76144;
}*/
a {
  color: #89b352;
  text-decoration: none;
}

a:hover {
  color: #98b2b3;
}

a:visited {
  text-decoration: underline;
}

/*
  ========================================
  Image
  ========================================
*/
/*I need to figure out how to size it right*/
.hero {
  grid-area: hero;
  text-align: center;
}

img {
  margin-top: .5em;
  height: 100%;
  width: auto;
  max-width: 700px;
  max-height: 800px;
}

#img-caption {
  display: none;
}

/*
  ========================================
  Article
  ========================================
*/
/*Needs scroll bars, and general design work*/
.articles {
  margin-top: 0;
  grid-area: articles;
  display: grid;
  grid-template-columns: repeat(3, auto);
  grid-auto-rows: auto;
}

#tribute-info {
  margin: 2em;
  height: 300px;
  padding: 1em;
  overflow: auto;
  border: 1px dotted #fff;
  background-color: #98b2b3;
}

/*
  ========================================
  Footer
  ========================================
*/
footer {
  padding: 1.5em;
  display: flex;
  justify-content: space-between;
  grid-area: footer;
  background-color: #d76144;
}

.column-1-3,
.column-2-3 {
  margin: 0;
}

.column-2-3 {
  padding: inherit;
  text-align: justify;
}

.column-1-3 {
  padding: inherit;
  margin: 0;
}

/*
  ========================================
  Responsive
  ========================================
*/
/* BROKEN NEEDS WORK */
@media only screen and (max-width: 500px) {
  body {
    display: grid;
    grid-template-areas:
      "head"
      "articles"
      "hero"
      "footer"
  }

  .articles {
    display: block;
    text-align: center;
  }
}
6

You can substitute all these selectors with just a *, it matches everything if you use it

* {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
1 Like
7

Ah thank you, that certainly makes it easier to read. I had just copied this from a website I used to learn some html basic. :sweat_smile:

8

Hey, guys I just want to say that I passed the challenge. It seems that I needed to make the img display into a block display :roll_eyes:.

I don’t necessarily understand it but I’m just kind of glad I was able to solve it. Thank you for all the help.

Here is my updated img code

img {
  display: block;
	height: auto;
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;
	padding: 2px;
}
9