Responsive image issue

I had some problems with my main image getting shrinking when I shrink my browser windows from left to right or top to bottom. I add ‘object-fit: cover;’ and it solved that but now when the window goes to a certain point, the image stop getting smaller and just get covered by the window…

I’v tried to play with the width but then I can see my Background- color in the sides…

Is any one know how can I can fix it?

This is my pen:

A few things to give you some ideas. When the screen is getting smaller, you have your CSS setup in a way that doesn’t allow the images or text to flex or wrap. For example, you have some items positioned as absolute so when the browser shrinks, you’re not allowing for these items to wrap or shrink since your telling the browser these items must be positioned where they are. Also, you have some margins set that are also forcing the browser to extend beyond the content. I would do the following, which isn’t a full solution, but will help you on your way:

  • Set your .row to max-width of 100%.
  • Your #title, .logo, and .headline-box are what is causing the overflow of the screen. Find a way to make this flex when needed. Either address this trough media queries like you have or adjust your CSS.
  • Your footer margins are causing the overflow as well. Take away your left and right margins and either set the max width of the text to 70% or something like that in order to create the space your looking for. Make sure you also have a text-align: center; to center your text if you want.

This isn’t a full solution, but hopefully you have an idea of what you’ll need to do from here. Reply once you made the changes and I’d be happy to relook at it again if you’d like. Happy coding!