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

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

here is my project:

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

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:

Screenshot 2022-03-30 9.30.13 AM

Your printout states:

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

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:

Screenshot 2022-03-25 8.58.52 PM

Screenshot 2022-03-25 8.58.17 PM

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

image

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.
1 Like

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. :slightly_smiling_face:

thank you

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



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:



READ ABOUT REM AND VW HERE:

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




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


Thank you for your help i will make the updates now :slight_smile:

1 Like