Landing Page Project - flexbox

Hi guys!

Back on the Free Code Camp curriculem after a 4 year break and re-doing the projects to try and bring myself back up to speed.

However I’m having afew difficulties…
First of all, I’m trying to refresh my Bootstrap knowledge whilst learning CSS Flexbox and FlexGrid concepts, hence using them all for different parts of the same page. A little confusing I know but just wanted to try a bit of everything.

I would like the text and button, bottom left, to be inside of the border and container - I don’t understand why it’s not? Could someone please help me understand!

Thank you!

Hi, it looks like your image is taking up all of the room inside your imgs-bottom container. You have:

img {
  max-height: 100%;
  min-width: 100%;
  object-fit: cover;

I tried this using just this:

img {
  max height: 80%;

Not sure that is what you want, but the button and text are showing inside the border.

Thanks ProgMan! Makes a lot of sense and seems to have mostly fixed the problem :slight_smile:
The only issue with this is that the images are not reponsive and do not shrink and grow as the container does. So unless the images are set very small, the layout will eventually break as you go to a very small screen. I could solve this with media queries but I’m sure there must be a way to make the images 80% OF the container for example?

Another issue I’m now having is it seems that the Grid has broken, it no longer resizes with the browser window. Any idea what I’ve done there?!