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 trialja5on
10,338 PointsHello, 3.5 months into course but i'm still struggling with CSS.. can you please help with paragraph behaviour problems.
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
Full Stack JavaScript Techdegree Graduate 27,918 PointsHello, 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 »</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 »</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
10,338 PointsBert 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
Full Stack JavaScript Techdegree Graduate 27,918 PointsYou're welcome!