Tribute page:1st layout error image responsive max-width property should be none plz check my page

HTML-CSS
1

hi , all of you people after revising all things again i have started to build the tribute page again this time all my own without taking help from anywhere or copy paste but i got stuck it is still needs proper coding but at first i want help in this after that i will arrange it again properly plz help.
@Roma @GalaxyCoding @BatmanFreeCodeCamper

here is the link of the pen https://codepen.io/Komal-1/pen/XWRNmxM

2

Hi @Komal-1. Iā€™m not sure what your question is. And thereā€™s no link to a pen.

Please give us a little more context so we can help.

Learning to describe problems is an important part of learning how to code.

Also, the more information you give us, the more likely we are to be able to help.

3

Sorry , now i have attached the codepen link kindly give it a check.

Screenshot from 2021-07-12 13-24-05
Screenshot from 2021-07-12 13-24-051366Ɨ768 241 KB

here i have also attached the screenshot of the error.

4

image should have a length and width

1 Like
5

i have given max-width:100% and height: auto is that good ? still i was facing that.

6

Hello,

youā€™re not pointing your css code to the right place

image{
 max-width:500px;
 display:block;
 height:auto;
  margin-left:auto;
  margin-right:auto;
}

to tell your css code you want to style your element with id=ā€œimageā€ you shoulde put an # before image:

#image {
...
}

try it, it should fix it.

1 Like
8

hey thank you so much :smiley: i was forgot that i was using id :sweat_smile: .
thanks .

1 Like
9

thanx for help it is solved now btw my codepen link is mentioned you can check my codes there .

10

@Komal-1, looks like you got a lot of answers really quick and one was deleted by the author so Iā€™m not sure what advice was given.

Iā€™ll say this. In the future when a test fails click the red button to see which test(s) are failing and text to help you correct the issue.

  • Be sure and read more than just the first line of the failing message. The ability to read and comprehend error messages is a skill youā€™ll need to acquire as a developer. Ask questions on what you donā€™t understand.

Also, looking at your code

  1. the style element is never to be used in the codepen CSS editor. That element is only used when using internal styling and it would be in the head element. If you use in in codepenā€™s CSS editor it will create problems. In short, delete it. (Codepenā€™s CSS editor is akin to having an external stylesheet)
  2. I know this sounds like feedback but codepen provides the boilerplate for you. It only expects the code youā€™d put within the body element in the HTML editor. (No need to include the body tags). For anything you want to add to the <head> element click on the ā€˜Settingsā€™ button, then HTML and add it into the ā€˜Stuff for <head>ā€™ box.
    Iā€™m mentioning this because you have elements out of order. Review this for an understanding of the HTML boilerplate tags.
  3. Do not use in-line styling. All your styling should be external
  4. Remember to run your HTML code through the W3C validator.
  5. While you technically met all user stories, that is they all pass you skipped over one. There should be a working tribute link. Putting in the code for a link but not providing the user something to actually click on is a bad UX.
2 Likes
11

thanx a lot for guiding me i am still learning by doing mistakes your tips are really very helpful for me it avoid my misunderstanding thanx a lot for that .
:relaxed:

12

i found my mistake that was because of image(id) i was treating image like a class.

13

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