Responsive Web Design:Basic CSS

Hi I can’t indrestand where is the problem any one can help me

please can you provide your code so that we can help you?

input[type='checkbox'] {
    margin-top: 10px;
    margin-bottom: 15px;
  }

1 Like

I have write the same thing but it didn’t like to work ,

please post your whole code if you need help with it

Check again man. It work

<SOLUTION REDACTED BY MOD>
1 Like

It is great that you solved the challenge, @UyDung, but instead of posting your full working solution, it is best to stay focused on answering the original poster’s question(s) and help guide them with hints and suggestions to solve their own issues with the challenge.

2 Likes

please any help , I can’t remove from this step ,can any one help me

what’s your code? :smiley:

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

<style>

 input [type='checkbox']

   {

    margin-top: 10px;

    margin-bottom: 15px;

  }

  .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;

  }

  .silver-background {

    background-color: silver;

  }

</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 thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>

  <div class="silver-background">

    <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="https://freecatphotoapp.com/submit-cat-photo" id="cat-photo-form">

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

you have two issues

you should not have a space here

this checkbox is broken

1 Like

Thank you , but I have correct them now and it didn’t like to be correct yet

what’s your code now? I made those two changes and for me it passes

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

<style>

 input[type='checkbox']

   {

    margin-top: 10px;

    margin-bottom: 15px;

  }

  .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;

  }

  .silver-background {

    background-color: silver;

  }

</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 thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>

  <div class="silver-background">

    <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="https://freecatphotoapp.com/submit-cat-photo" id="cat-photo-form">

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

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

this is still broken

1 Like

thank you very much
can you help me to correct it please

you are missing a quote, and you should have it all in one line

1 Like

thank you very much for all your effort with me :blush:
I have solved the problem

awesome! Good job!

Happy coding!

1 Like