Help me to solve this

HTML-CSS
1

Tell us what’s happening:
it’s tellin’ that Your image should be 100 pixels wide.

Your code so far


<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
.smaller-image {
  width: 100px;
  }
.red-text {
  color: red;
}

h2 {font-family: Lobster, monospace;}

p {font-size: 16px;font-family: monospace;}
</style>

<h2 class="red-text">CatPhotoApp</h2>
<main>
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>

<a href="#" ><img class="smaller-image" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>

<div>
  <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>
</div>

<form action="/submit-cat-photo">
  <label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
  <label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
  <label><input type="checkbox" name="personality" checked> Loving</label>
  <label><input type="checkbox" name="personality"> Lazy</label>
  <label><input type="checkbox" name="personality"> Energetic</label><br>
  <input type="text" placeholder="cat photo URL" required>
  <button type="submit">Submit</button>
</form>
</main>

Your browser information:

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

Challenge: Size Your Images

Link to the challenge:
https://www.freecodecamp.org/learn/responsive-web-design/basic-css/size-your-images

3

Welcome, aish.

Your code passes the tests for me, so try some of these things:

  1. Make sure your browser zoom level is set to 100%
  2. Disable any extensions that have access to freeCodeCamp.org (especially adblockers and CSS stylers)

Hope this helps

4

the browser zoom is 100%
but how to disable and locate any extension you are talking about

5

If you do not know what I am talking about, then I doubt you have any extensions.

Could you try this lesson on another device? Or, a different browser?

6

i had grammerly as an extention
is that the same extention u are talking about
if yes then i removed it but still i m facing the problem
plzz help me cos’ i want to continue this lesson on the same device and browser
plzzz reply fast
i m confused , should i wait for your reply

7

Could you follow these instructions:

  1. Copy and paste this code into the coding section of the lesson (Make sure this is the only code in that window):
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
.smaller-image {
  width: 100px;
  }
.red-text {
  color: red;
}

h2 {font-family: Lobster, monospace;}

p {font-size: 16px;font-family: monospace;}
</style>

<h2 class="red-text">CatPhotoApp</h2>
<main>
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>

<a href="#" ><img id="image" class="smaller-image" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>

<div>
  <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>
</div>

<form action="/submit-cat-photo">
  <label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
  <label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
  <label><input type="checkbox" name="personality" checked> Loving</label>
  <label><input type="checkbox" name="personality"> Lazy</label>
  <label><input type="checkbox" name="personality"> Energetic</label><br>
  <input type="text" placeholder="cat photo URL" required>
  <button type="submit">Submit</button>
</form>
</main>
<script>
  console.log(document.getElementById("image"));
</script>
  1. Press ctrl + shift + i to open up your development tools
  2. Look for this symbol in your dev tools and click it:
    image
  3. Click the Run the Tests button for the lesson
  4. Right-click on the log in the dev tools, and choose Reveal in elements panel
  5. Screen shot the dev tools window, and post it here.

Ask, if anything is unclear.

1 Like
8

i dont know how to screenshot
but i did the steps till the 3rd step u sent till that pic but it was showing only < this symbol
then i went to element panel and it showed all the codes .I m not able to select 'em
now what?
plzzz tell fast

9

Do you see this:
image

Specifically, the enclosed box in red? Does yours also say 100 x 100?

10

yes of course
but instead 100x 100 it shows auto x auto
plzzzzz reply a little bit quick

11

i can see the box but it says auto x auto

12

Add this to your CSS code and run the tests:

.smaller-image {
  width: 100px !important;
  }
13

the problem still remains
i wonder that if instead 100px i put 90px then also the size of pic changes that means i can control its size but then also the system does’t allow me to pass

14

just now i reopened that element tab and instead of auto x auto it shows 948.350x692.087

15

Bugs can be reported as GitHub Issues. Whenever reporting a bug, please check first that there isn’t already an issue for it and provide as much detail as possible.

Unfortunately, I am out of ideas. So, i suggest opening an issue. Sorry, that I could not be of more help

16

but then how will i make access to my remaining course

17

are u replying???

18

what browser are you using?

you can access the next challenge from the curriculum where all the challenges are listed

you are not obligated to do them in any particular order

just go to the next one from there and keep going

@aishchampion

19

plzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz reply me faaaaaaaast

20

this is not an instant chat, please be patient, people will answer when they can. People have a life outside the forum, please respect that.

2 Likes
21

thx yesterday my daily message sending capacity was completed
by the way i m using chrome as my browser
ithank u to help me