Basic CSS: Size Your Images i'm stuck please help

Basic CSS: Size Your Images i'm stuck please help
0
#1

Heyy i have a problem with this challenge and i am stuck here, the code is fine i did everything i had to do but it keeps telling me that my browser’s zoom should be at 100% and it already is please someone help me!

this is my code as you can see is ok

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

<style>

.red-text {

color: red;

}

.smaller-image{

width: 100 px;

}

h2 {

font-family: Lobster, monospace;

}

</style>

<style>

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>

0 Likes

#2

Next time please format your code by surrounding it in ``` (three back-ticks)

You can’t have a space between the value and its unit.

width: 100 px; should be width: 100px;

Also you are using “smart quotes”, it won’t work for code.

class=“smaller-image” should be class="smaller-image"

If you’re using a mac you can deactivate smart quotes in your settings.

0 Likes

#3

I am having the same problem. I think the module might be buggy? Skip this module?
"
class=“smaller-image” {
width: 100px;
}
.red-text {
color: red;"

0 Likes

#4

I also tried the way it was taught:

"
.smaller-image {
width: 100px;
}
.red-text {
color: red;"

0 Likes

#5

I have the same problem at this code
anybody help us plz ?
we are stuck at here

0 Likes

#6

how can i skip plz?
i don’t have skip option neither.

0 Likes

#7

hey, Slowmono
I get the solution if you are just stuck at here still, the problem is the device we are using although i don’t know which device you using. for me, when I got stuck on this code, I was you using a mini Chromebook laptop for high school students. this is how I fixed the problem
I logged in my account from a desktop computer. then i restarted the coding from where i got stuck and i just passed for the first click on “Test the code”.
GOOD LUCK

0 Likes

#8

Here is the solution that I used and it works with no issues. I even went back and checked and it passes.

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

  h2 {
    font-family: Lobster, monospace;
  }

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

  .smaller-image {
    width: 100px;
  }

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

Spelling, Spaces & Format are the main areas that trip me up, make sure that your solution is spelled and formatted correctly and doesn’t have any unnecessary spaces.

0 Likes