Text alignment issue.

Question

So I was trying to make a simple Visit Card, there is a text that stays outside of the given border, I was unable to figure out how to place the said text without having to increase the div border radius.
https://code.sololearn.com/Wa8a21A0a1a1/#

Answer 1

I used body overflow-x: hidden. And added a float to the last two paragraphs. I edited the position
and I cleared the float with div.

Probably not the best method.

https://code.sololearn.com/WKvrGtuB0GQk/?ref=app

Answer 2

Use overflow-y: scroll to make the extra content scrollable or use hidden to hide it
https://code.sololearn.com/W5hycJ7oSr87/?ref=app

Answer 3

Chris C.
I couldn't even switch to CSS or JS tab without having the app crash unfortunately.

I saw someone's suggestion about editing the code in SoloLearn web to avoid crashes. Edits through the app *might* be the cause.

But Idk exactly why, maybe just recent change in app that is problematic. I hope the devs get the bug fixed soon though 🙏

Answer 4

Chris C. I have seen the changes you've made and I do have two questions, what does the *(astericks) adds padding and margin to?
And what's the reason that float: right is placed in a separate class instead of the description class?

Answer 5

Chris C. So * means all, same as in sql, notes taken!
Thanks for your help :)

Answer 6

@ You're welcome , Happy Coding!

Answer 7

Chris C.
No, your code opens and runs just fine 👌

But I prefer if I can open any web code without having to add some temporary "fixes" just to prevent the crash, just like how it was before.

Answer 8

The * means do this for "all elements" (a universal selector), so we are setting all elements to have zero margins, and zero padding, thus making them look the same in all browsers. This is a common technique called a CSS reset.

floats are separate in case I wanted to float something else other than the description to the left or right.