Tribute page img is not responsive

Code Feedback
1

One of the tests on my tribute page keeps failing:
The element should responsively resize, relative to the width of its parent element, without exceeding its original size.
I really don’t understand what I am doing wrong, since I am using max-width: 100% and height: auto.
Can someone tell me what I am doing wrong?
Here is my codepen: https://codepen.io/neuzasousa/pen/KKavWGd

Any help will be much appreciated.

1 Like
2

I’ve been looking at your code for a while now and I still have no idea what’s wrong with it, CSS acts like it’s not even connected to HTML when it comes to image. Be patient, someone will eventually figure it out, and I would like to see that also :smiley:

3

I found the problem. You had several semicolons (;) that were causing the problems. Just remove them from the code and it will work well.

Example:


#title {
  font-size: 1.25rem;
  margin-bottom: 0;
  font-weight: bold;
  line-height: 1.5;
  text-align: center;
  color: #333;
}; <---THIS WAS CAUSING THE ISSUES

header p {
  font-size: 1.6rem;
  line-height: 1.5;
  text-align: center;
  color: #333;
  font-weight: normal;
}; <---THIS WAS CAUSING THE ISSUES

#img-div {
  background-color: white;
  padding: 10px;
  margin: 0;
}; <---THIS WAS CAUSING THE ISSUES
1 Like
5

It worked! Thank you very much! :heart:

1 Like
6

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.