Help needed on the build a tribute page project

Help needed on the build a tribute page project
0

#1

Hi all, please I keep getting the errors :

  • The element should responsively resize, relative to the width of its parent element, without exceeding its original size.

  • The element should be centered within its parent element.

for my code below. any help?

body {
  font-family: Arial, Monospace;
  background: gray;
  color: #fed;
}
#main {
  margin: 25px auto;
  padding: 12.75px;
  border: 5em dashed gold;
  border-radius: 10em;
  background: #12125255 img {
    max-width: 100%;
    display: inherit;
    height: auto;
    margin: auto;
  }
  img{
  max-width: 100%; 
  display: block; 
  height: auto;
  margin: auto;
  #img-div {
    margin: 10px;
    margin-top: 15em;
    width: 100%;
    border: 10px dashed gold;
    background: gold;
  }
}
.text-center {
  text-align: center;
}
h1 {
  font-size: 75px;
  margin-bottom: 30px;
}
h5 {
  font-style: italic;
  font-size: 35px;
}

Thanks


#2

If you are using Codepen, please edit your original post and add the Codepen link? That would allow us to see what could be causing your problem.

Thank you.


#3

Hi, this has been edited as suggested.

Thanks


#4

The following CSS has some syntax issues. You have two img selectors but do not close either of them.

 background: #12125255 img {
    max-width: 100%;
    display: inherit;
    height: auto;
    margin: auto;
  }
  img{
  max-width: 100%; 
  display: block; 
  height: auto;
  margin: auto;
  #img-div {

Instead, you just need one img selector. I recommend using the following img selector:

img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: auto;
}

You are missing an = between the image’s alt attribute and the value “Jacen Solo as Darth Caedus”

Also, definitely get rid of the onmouseover and onmouseout Javascript, because it is not needed once you get the correct CSS code written.

Other suggestions for you CSS would be:

#1) Change the main class to the following which will make the border not quite so large and have a more substantial padding to pull the yellow div off the outside rounded border. Hex color values are only 6 characters long, so I cut your #12125255 down to #121252 which changed the color a lot. If you actually want the color that was showing, then use #5B5B70.

#main {
  padding: 2em;
  border: 2em dashed gold;
  border-radius: 10em;
  background: #121252; 
}

#2) Change the img-div id selector to the following which will give the inner yellow container holding the image a slightly rounded appearance.

#img-div {
  margin: 20px;
  border: 10px dashed gold;
  background: gold;
  border-radius: 1em;
}

#3) Change the body selector to the following to create a max-width of 900px for this container. This will keep that yellow inside container from overwhelming the design when the browser width is greatest.

body {
  font-family: Arial, Monospace;
  background: gray;
  color: #fed;
  max-width: 900px;
  margin: 25px auto;
  padding: 10px;
}

#4) You should make the caption text color darker than white. It is very difficult to read it against that yellow background.

#5) My final suggestion is to create a media query for screen widths 550px and smaller and lower the font-size property values for h1 and h5 elements so they do not overpower the rest of the page’s content on smaller width devices.


#5

Thank you so much.

Really learned a lot more by adopting the corrections you suggested