Responsive Image Issues

I am working through the first project of the HTML/CSS course and I seem to be having some issues with the “resizing image” section.

The line of code I am using for my class is:

.boothPic{
 max-width: 100%;

height: auto;
}

Here is the image itself. I have removed the “<” and “>” from the end so. you can see the text.

img id=“img” class=“thin-grey-border boothPic”
src=“https://www.newfrontierchronicle.org/wp-content/uploads/2018/07/william-catherine-booth-nfc-640x400.jpg” alt=“William Booth and his wife Catherine.”

Rather than a code snippet it is best if you provide a live link to your project.

You’re going to have to submit that link when you submit the project too.

This was the first one but I was having issues with the responsive image and I believed it was from the fact that it was within a grid.

This was the second one I was doing just to try and check the boxes. Was still going to make it look better, but wasn’t going to use a grid.

@jowebb7, I just took a look at TributeV2. Some things;
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.

The first failing message says;

Within the "img-div" element, I should see an <img> element with a corresponding id="image".
expected null to not equal null
AssertionError: expected null to not equal null

Do you understand what the test is looking for and why it’s failing?

The next to failures are caused because of this one.
When you do correct the above there will still be failures but they’ll tell you what they were looking for so be sure to read the full message.

Some other things to note.
Keep all your styling external. Do not use internal styling. That means take what you have between the style tags and put it into codepen’s CSS editor.
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.

You have some open elements. As a suggestion you can switch the Syntax Highlighting in Codepen to help catch errors.
Go to your Codepen profile Settings → Editor Preferences (not the setting for the pen, but for your profile). Switch the Syntax Highlighting to Oceanic Dark and save the setting. Go back to the pen and make sure your new setting is working. The code highlighting will be using different colors. Errors will now be marked in red.

And do not use the <br> element to force line breaks or spacing. That’s what CSS is for.
Reference MDN Docs
If you want paragraphs then create paragraph elements.

Thanks for all the feedback!

I didn’t realize it would show you which test was failing. Between that and swapping the theme of the code, I was able to clean it up a lot.

I will certainly work on using css for all of the styling elements. It was a bit of a learning curve coming from the lessons where you are working on everything within the same document to having a split HTML/CSS/JS.

Looking at V1 now…. The error I am still facing is the resizing of the image.

Based on the lessons and what I have found on the internet, shouldn’t this line of text solve the issue “ 1. The element should responsively resize, relative to the width of its parent element, without exceeding its original size.”

 .boothPic
{ max-width: 100%; height: auto;
}

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