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
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.
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
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 pointThanks! 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:
