Skip to content

Make Images Mobile Responsive 1st test failing #7671

Closed
seasickmonkey opened this Issue · 5 comments

2 participants

@seasickmonkey

FreeCodeCamp Issue template

To Use this Template:

  • Fill out what you can
  • Delete what you do not fill out

NOTE: ISSUES ARE NOT FOR CODE HELP - Ask for Help at https://gitter.im/FreeCodeCamp/Help

Issue Description

1st test is failing even if the code is correct.

Browser Information

firefox, win7

Screenshot

capture

@raisedadead
Free Code Camp member

@seasickmonkey Thanks for creating the issue. Will you please help us with the code as well, it would be easier for anyone to check this, that way.

you can use code formatting like:

```

Your code here

```

which will look like

Your code here
@seasickmonkey

here is the code, however I logged in from my phone and the issue disappeared. I also tried everything, hard reload, deleted cookies, etc..

<link href="http://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;
  }
</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="http://bit.ly/fcc-relaxing-cat"></a>
  <img class="img-responsive" src="http://bit.ly/fcc-running-cats">

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

@raisedadead
Free Code Camp member

@seasickmonkey I can't reproduce the issue with code above. Are you still stuck? I am confused, after you logged in from your mobile did the issue disappear from all devices that you have been using?

@raisedadead raisedadead added the blocked label
@seasickmonkey

yes, the issue went away when I logged in from the iOS. it was very weird, it seemed that the parser counted 1 image as 2.

@raisedadead
Free Code Camp member

Closing as confirmed solved. Thanks @seasickmonkey !

@raisedadead raisedadead removed the blocked label
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.