Responsiveness of text at the right side of screen
https://share.vidyard.com/watch/s5W1DPzS4187hpY4t9iPSz?
https://codepen.io/Antony-Collin/pen/WNYejKZ
As you can see in the vidyard, I'm trying to fix the responsiveness of the text at the top right corner of the screen, it's a flexbox with a tags in it, made it align-items: end; so that it displays at the right side of the header. I could easily fix it by putting media queries at breakpoints but I have no idea if it's good pratice, I feel like there's a better way to make the text resize normally. I have no idea what to do.
4 Replies
Right now, you have a
margin-left to move it over.
75% gets smaller as the screen gets smaller, but the size of the nav doesn't, so it runs out of space.
I would remove the margin and positioning on the nav and add
it now works as intended, thank you so much ! but now if you don't mind, another problem is that at a moment some text will go underneath to get more space, what would you recommend to do in situations like this ? Should I just reduce the font-size with a media query breakpoint ? btw if you see this message, I began your course on responsiveness, it helped me a lot and I love your videos keep up the work, you definitely made css less scarier for me
You could reduce the font-size, or add
flex-wrap: wrap to the header along with the rest 🙂you're the goat.
if you wanted an update, I've even removed the height from my header and put padding instead so that the header is the size i want. so no weird problems when the text splits. I guess it's better this way.