Size your Images -1.0

Size your Images -1.0
0.0 0

#1

Tell us what’s happening:
Spent an hour on this implementing numerous combinations and locations of coding in this section of the lesson. I have reviewed previous lessons to rectify my inability to proceed past this point and am now on my knees typing this message in hopes I can get answers to breakthrough this pebble-sized wall I am stuck behind.

Your code so far

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

  h2 {
    font-family: Lobster, Monospace;
  }

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

<h2 class="red-text">CatPhotoApp</h2>

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

<p class="red-text">Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
<p class="red-text">Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>


<link   
      href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css" class="smaller-image">
<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>

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

<p class="red-text">Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
<p class="red-text">Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>

Your browser information:

Your Browser User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/65.0.3325.181 Safari/537.36.

Link to the challenge:


#2

Somehow my copy/paste missed the first line of my code being:


#3

ahh… okay, it doesnt show…hmm…


#4

Hello.

I see that on the five first lines of code you add the .smaller-image but you did not open the <style>tag. I would recommend to move the .smaller-image to the second <style> block right after the href.

One point to take in consideration is that if you move the .smaller-image to the second <style> block you should take the third <style> block away, otherwise you are going to have to smaller sized images.

Hope that helps.


#5

Thank you for your time to respond. It sounds very helpful and I will see if I can implement said response.


#6

and that first tag is there, but when I posted that code, it would not show it twice.

So I took out the first style block completely and added it to the second style block below. Nothing seems to have changed. I was under the impression that I had to tag that code into the image as well. This is where Ive ended up and sadly I have been here before.

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

h2 {
font-family: Lobster, Monospace;
}

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


#7

this did not include the entire copy/paste…


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

h2 {
font-family: Lobster, Monospace;
}

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


#9

I am sorry, but I can’t seem to post my code in its entirety so show you where I am at so I can gain more help. =/


#10

@Twisty … as i saw your code, it is duplicated more than two times (specially your style tag).
Just delete from the first .smaller-image until the second link tag (<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css" class="smaller-image">) but not delete the second link tag.
That is it!