Cat photo app need halp

hello this is my first post and I am stuck on the first project. I’m in the ‘size your image’ portion of the project and can’t figure out what i am doing wrong. I am inserting the smaller-image class within the portion, however it is still not working. do i have to insert the smaller-image class within the class?

It’s hard to help without showing the code you actually had that’s not working.For size your image make sure you added the css properly and you are referencing it from the img class

You first have to create a CSS class for your smaller-image and then when you refer back to your html image element, you have to mention and input that class into the element code.

So for example if I wanted to do a small image with the size of 200 pixels I’d do:

.smaller-image { width: 200px; }

(don’t forget the period in front of smaller-image (.smaller-image) because it declares it as a class)

Then when I work on the image element I would put another code line under my style class declaration as:

this made up thing.

The “alt” is just an alternative text input if in case the image doesn’t show up for a viewer.

Hope this helps!

1 Like

Dang I wrote the code and it acted like it on the text now it doesn’t make sense when it’s read…

so style class declaration for the small image with 200 px

< style >
.smaller-image {
width: 200px;
< /style >

and then the image element:

<img class = smaller-image src = the source of your image alt = alternative text in case image doesn’t show up. and then after that the closing tab. (which I can’t type because it’ll turn it into the actual code)

sorry didn’t notice the other side of this reply panel, there was a tip window that was covering it, first time using the forum.

1 Like

@jpuentes421 Did @angyang04 solve this for you? Her solution is correct, though it is a bit hard to understand because @angyang04 seems to be unfamiliar with BBCode’s way of inserting code into a post on these forums. It should be as simple as this:

Which I accomplished by using the “[code” and "[/code (both of which do have closing brackets, but will merely display the “and” in a code block if I put them in the right place). For more info on BBCode code blocks, this is a decent reference:

For your specific case, the code should be in the “style” section of your html code and should look like this:

.smaller-image { width: 100px; }

After you’ve defined that in the “style” section, you’ll want to use the class you just defined by adding it to your img element like so:

<img class="smaller-image" src="yourimageurl" alt="alt-text">

Which is exactly what @angyang04 was saying :smile:

If you need a more precise explanation, I’m sure someone can provide one (or, should they not, I can) - just ask! Glad you posted in the forum; you may also want to check out the chat room.

Thank you so much! :smiley:

1 Like