CSS

Hello, 3.5 months into course but i'm still struggling with CSS.. can you please help with paragraph behaviour problems.

https://w.trhou.se/0tv136fzoh

I have covered this but i cannot think how to have the fluid feel to the webpage when resizing the viewport. My paragraphs move all over :-)

2 Answers

Bert Witzel
seal-mask
.a{fill-rule:evenodd;}techdegree
Bert Witzel
Front End Web Development Techdegree Student 9,004 Points

Hello, I took a look at your code. In a situation like this I would recommend floating the images rather than the paragraph. Floats are good for images and text wrapping around the image. I adjusted your code how I might do it, changing the paragraph classes to the images (might be better to change the class name to something that fits better but this'll work:

<!-- 3. Display the image 'beagle.jpg' -->
        <img class="beagle paragraph1" src="images/beagle.jpg" alt="Spiegel the beagle">
        <p >Doggo ipsum very jealous pupper borkdrive maximum borkdrive most 
          angery pupper I have ever seen fat boi pupperino, long water shoob 
          thicc pupper h*ck. long woofer porgo stop it fren. Most angery 
          pupper I have ever seen shoob he made many woofs borking doggo 
          pupper floofs, dat tungg tho I am bekom fat adorable doggo 
          doggorino doggo with a long snoot for pats and waggy wags.
          Doggo ipsum very jealous pupper borkdrive maximum borkdrive most 
          angery pupper I have ever seen fat boi pupperino, long water shoob 
          thicc pupper h*ck. long woofer porgo stop it fren. Most angery 
          pupper I have ever seen shoob he made many woofs borking doggo 
          pupper floofs, dat tungg tho I am bekom fat adorable doggo doggorino 
          doggo with a long snoot for pats and waggy wags dat tungg tho I am bekom 
          fat adorable doggo doggorino doggo with a long snoot for pats and waggy
          wags. Doggo ipsum very jealous pupper borkdrive maximum.</p>

        <!-- 4. Link to the file 'beagle.html' -->
        <a href="posts/beagle.html">Read more &raquo;</a>
      </article>
    </div>
      <article>
        <h3>Golden Retriever is Friends with a Beaver</h3>

        <!-- 5. Display the image 'golden.jpg' -->
        <img class="paragraph" src="images/golden.jpg" alt="a golden retriever">
        <p >Puppy kitty ipsum dolor sit good dog foot stick canary. Teeth 
          Mittens grooming vaccine walk swimming nest good boy furry tongue 
          heel furry treats fish. Cage run fast kitten dinnertime ball run 
          foot park fleas throw house train licks stick dinnertime window. 
          Yawn litter fish yawn toy pet gate throw Buddy kitty wag tail ball 
          groom crate ferret heel wet nose Rover toys pet supplies.</p>

        <!-- 6. Link to the file 'golden.html' -->
        <a href="posts/golden.html">Read more &raquo;</a>
      </article>

      <article>
        <h3>McCluskey the Husky is Stubborn yet Trusty</h3>

        <!-- 7. Display the image 'husky.jpg' -->
        <img class="paragraph" src="images/husky.jpg" alt="McCluskey the huskey">
        <p >Bork shibe waggy wags shibe such treat shibe corgo, blep tungg 
          doggorino heck heckin good boys and girls, snoot porgo long woofer 
          long doggo big ol pupper.  Long doggo big ol pupper mlem blop, doggo. 
          Woofer long doggo many pats stop it fren borking doggo boofers, 
          floofs vvv smol borkdrive.</p>

Then in the CSS I added a little margin to give the image a little space from the text. You might want to adjust the size of the image too, I don't know.

.paragraph, .paragraph1 { border: rgb(59, 66, 75) solid 5px; border-radius: 15px; padding: 10px; margin: 20px; max-width: 300px; float: right; }

Bert Witzel, thank you so much for taking the time to respond, i have looked over and implemented your code on my project it is really more than i was hoping for, thanks for going the extra mile! I can see where i went wrong, thanks again. Jason.