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.
Vidyard
Vidyard Recording
Vidyard video
4 Replies
Kevin Powell
Kevin Powell•2y ago
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
header {
display: flex;
justify-content: space-between;
}
header {
display: flex;
justify-content: space-between;
}
QuEEb
QuEEb•2y ago
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
Kevin Powell
Kevin Powell•2y ago
You could reduce the font-size, or add flex-wrap: wrap to the header along with the rest 🙂
QuEEb
QuEEb•2y ago
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.
Want results from more Discord servers?
Add your server