Working with text width

Hello! I'm doing a FE Mentor challenge for practice and a recurrent problem I face is making text match the line breaks in the design. Here's an example of what I'm currently working with: 1st image design 2nd image my work so far I'm wondering what would be the good way to approach this, should I turn each text element into a different display so that I can manually set widths, or should I be adding padding? How would you approach this, Thanks!
4 Replies
Kevin Powell
Kevin Powell2y ago
Looks like the available space for your text is too big, and maybe the font-sizes too small? I never worrying about exact line breaks, because there are so many factors that could be at play (different OSes render type slightly differently, which can cause a line break at a different place), but it could be a bit closer here. My first thing would be to make sure the font-sizes are close, then getting close for the overall width of the container (both the image and the text together, what's the total max-width?), then the gap between the two (the original gap in the middle looks bigger than yours), then adjusting the total width of the text container if needed to get it close enough. Never do things element by element, it's something that you'd never do on a larger project, and something you'd just break your head over.
TheHonoredOne
TheHonoredOne2y ago
Well regarding the title I just have to guess, but as for the paragraph it came defined in the style-guide.md. I've added a gap, I'm doing it with flexbox for practice. The thing is when I try to change the width of the text container, the image follows up and starts growing and I just want it to keep its current size
Kevin Powell
Kevin Powell2y ago
I think ideally that entire thing would have a max-width on it you can also put a max-width on the image, and that will stop it from growing when it hits that point
TheHonoredOne
TheHonoredOne2y ago
Thanks! That was it, I managed to keep the image on a specific size and play around with the other container, here's my final result:
Want results from more Discord servers?
Add your server