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.