How to change my position image on the new image below old one and have the class img-responsive

HTML-CSS
1

Tell us what’s happening:
Describe your issue in detail here.

  **Your code so far**


<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">

<style>
.red-text {
  color: red;
}

h2 {
  font-family: Lobster, Monospace;
}

p {
  font-size: 16px;
  font-family: Monospace;
}

.thick-green-border {
  border-color: green;
  border-width: 10px;
  border-style: solid;
  border-radius: 50%;
}

.smaller-image {
  width: 100px;
}

.img2-33 {
  width = 20px;
  height = 30px;
}
</style>

<div class="container-fluid">
<h2 class="red-text">CatPhotoApp</h2>

<p>Click here for <a href="#">cat photos</a>.</p>

<a href="#"><img class="smaller-image thick-green-border" src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>

<a href="#"> <img class="img2-33" src="https://www.inpixio.com/remove-background/images/main-after.jpg">

<p>Things cats love:</p>
<ul>
  <li>cat nip</li>
  <li>laser pointers</li>
  <li>lasagna</li>
</ul>
<p>Top 3 things cats hate:</p>
<ol>
  <li>flea treatment</li>
  <li>thunder</li>
  <li>other cats</li>
</ol>
<form action="https://freecatphotoapp.com/submit-cat-photo">
  <label><input type="radio" name="indoor-outdoor"> Indoor</label>
  <label><input type="radio" name="indoor-outdoor"> Outdoor</label>
  <label><input type="checkbox" name="personality"> Loving</label>
  <label><input type="checkbox" name="personality"> Lazy</label>
  <label><input type="checkbox" name="personality"> Crazy</label>
  <input type="text" placeholder="cat photo URL" required>
  <button type="submit">Submit</button>
</form>
</div>

  **Your browser information:**

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/98.0.4758.102 Safari/537.36

Challenge: Make Images Mobile Responsive

Link to the challenge:

2

This is not valid assignment syntax.

.img2-33 {
  width = 20px;
  height = 30px;
}

You use a colon : to separate the properties and values, just like you can see it done in the other selectors.

3

yes bro, recently i realize it. Now can you help me, how to put my new image below the old one? please.

4

Hello there.

Do you have a question?

If so, please edit your post to include it in the Tell us what’s happening section.

Learning to describe problems is hard, but it 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.

What’s your updated code?

1 Like
5

The Ask for help feature should be used for asking questions about the challenge and not unrelated questions. You can always open a thread with any question you have.

Anyway, you can set either of the images to be display: block to force a new line.

.smaller-image {
  width: 100px;
  display: block;
}

.img2-33 {
  width: 20px;
  height: 30px;
}
1 Like
6

big thanks for your solution bro. i’am a newbie programmer. And i want to study about bootstrap.

7

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