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

[makslubax]

hello im doing my projects and am unable to pass due to not being able to pass the test.

here is my project:

RwjzVRG

it though that it worked but it doesn’t get ticked by the software?
does any one know why this is.

[ALLESS]

If you run the test, and press the red button, It will print out a detailed list of the user stories that were not passed:

[ALLESS]

Your printout states:

[makslubax]

thanks for the reply.

my css for the image uses “display: block” is it asking to use incline? because when i tries that the error did not disappear

[ALLESS]

Ok, first: There are quite a few small errors in the code:

You can use the Analyze Function on Codepen to help guide you through the code corrections. If you have any problems with this, or get confused, feel free to ask for help:

KEEP PUSHING ANALYZE , and making corrections to the code, until this appears:

Second: I can get the code to pass 10/10 by fixing the #image, but the layout is not correct, even if it is passing.

---

Go ahead and fix the HTML and CSS errors, and then we can work through the layout's problems.

[makslubax]

hello thank you for all your help I fixed all my errors. is there anything i can do to fix the layout on the image.

thank you

[ALLESS]

Good Job at Fixing all of the errors:

---

To complete the Test Requirements: Change the #image to

#image{
  
  max-width:100%;
  display: block;
 
}

---

To make Your site almost fully Responsive:

---

YOU CAN: ADD A CLAMP FUNCTION TO THE TITLE FONT

#title{
  
  width: 100%;
  background-color: grey;
  font-size: clamp(.5rem, 10vw, 2rem);
  text-align: center;
}

---

READ ABOUT THE CLAMP FUNCTION HERE

clamp() - CSS: Cascading Style Sheets | MDN

---

OR , YOU CAN ADD A @MEDIA QUERY AT 320PX
AND CHANGE THE FONT-SIZE FROM
30PX, TO 1.8REM OT 1.9REM.

#title{
  
  width: 100%;
  background-color: grey;
  font-size: 1.8rem;
  text-align: center;
}



@media (max-width: 320px) {
  h1 {
    font-size: 20vw;
  }
}

READ ABOUT MEDIA QUERIES HERE:

Media Query CSS Example – Max and Min Screen Width for Mobile Responsive Design

---

READ ABOUT REM AND VW HERE:

Learn CSS Units – Em, Rem, VH, and VW with Code Examples ✨✨

[ALLESS]

EDITING FOR THE CONTENT:

---

Instead of using:

OW – KB „Sokół”

---

Consider using these English Equivalents

Sokół Battalion
OW Battalion ‘Sokół’
Battalion OW – KB ‘Sokół’
Battalion KB “Sokół”

---

This sentence seems to be a mix of English and Polish

Instead of using:

Polish Home Army soldier from battalion OW – KB „Sokół” on the na barricade Bracka street

---

Consider Using:

A Polish Army Soldier from the Battalion KB “Sokół” on the baracade on Bracka Street, Warsaw, Poland. 1944.

OR

A Polish Army Soldier from the Battalion OW – KB ‘Sokół’, at the barricade on Bracka Street, between buildings 9 and 12. Warsaw, Poland. 1944.

---

Capitalize all the First Letters of the sentences and address the letters and text in BOLD font:

---

Started in the summer of 1944 by the Polish Underground Resistance

The resistance fought for 63 days with none to little [phrase: little to no] outside support

The soviet army holted [sp. halted] their advance allowing the resistance to be crushed

Largest ever european [Cap. European} resistance movement during WWII

The Warsaw Uprising

Key Points:

Wikipedia Page detailing The Warsaw Uprising

---

[ALLESS]

---

@bbsmooth May have a better, more appropriate way of Making the Title Font Responsive.

---

[makslubax]

Thank you for your help i will make the updates now