COLMAR ACADEMY - Capstone Project

Hi guys! I’ve just finished my desktop version and the mobile one will come up soon. https://justynasieczka.github.io/Colmar-Academy/

I’m having an issue with overflowing content while resizing a browser. Do you have any idea how to fix it? Please take a look at the “banner section”. The text box content “Learn something new everyday” doesn’t resize proportionally. I tried to use flex-grow and flex-shrink but I don’t think it’s the case. How can I make the text resizing proportionally to the parent container? Thank you!

Hi,

I managed to help you with the overflowing #information .news .news-container .content and #thesis .thesis-content .news-container .content elements by changing their padding-right property to 0.

I think this is the main issue - including the problem with overflowing as above. Flexbox only can resize the containers (boxes) but not the text inside of them. I’d advise you use @media to change the font-size gradually as you narrow the screen down as described in the Responsive Design course and by checking frequently in Devtool how it works for your design. I’d also suggest that you set up ‘basic’ font-size this way:

html {
  font-size: ...px
}

and use rem to all css values instead of px to maintain proportionality. And lastly, when changing the basic font-size by media queries doesn’t help or looks messy, try to rearrange the elements, placing elements that appear next to each other horizontally on bigger screens to vertical setup.

Happy coding!

1 Like

Thanks!
But I’m still struggling with overflowing containers. Could you guys take a look at mobile version of my website? https://justynasieczka.github.io/Colmar-Academy/

I have no idea what is wrong with #information .news .news-container - it overflows the body. I’ve been struggling to fix this but no results :frowning: I’m getting frustrated… I’ll be very grateful for your help!