Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by ja5on
ja5on
10,338 Points

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
.a{fill-rule:evenodd;}techdegree seal-36
Bert Witzel
Full Stack JavaScript Techdegree Graduate 27,918 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; }

ja5on
ja5on
10,338 Points
ja5on
ja5on
10,338 Points

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.

Bert Witzel
.a{fill-rule:evenodd;}techdegree seal-36
Bert Witzel
Full Stack JavaScript Techdegree Graduate 27,918 Points

You're welcome!