So I have a pretty simple layout to achieve.
I have a header that is 100% wide and 100px tall with flex layout, inside I have two div’s - “logo container” and “nav container”. Nav container is fixed size 100x100px and logo container is automatically growing to take up the rest of the available space.
the logo container has flex layout and it has two images inside of it - the idea is for the logo container be the boundary for the possible image size… the images are set to auto height/width and 100%max height.
The problem is that when I go into cellphone breakpoint and the viewport is narrow, the images need to dynamically resize to fit the logo container BUT they go outside of bounds of the logo container and either over/under lap the Nav container… The logo container does not constrain the images for some reason… I have been beating my head against that wall for last two days and was not able to solve this…
also for some reason one of the images resizes and another one doesn’t - and I can’t explain it!
I tried to replace images, i tried to recreate it on a different page and in a different project alltogether - nothing works… I can’t get them to dynamical shrink and/or grow when needed.
I feel like a dumbass for not being able to figure it out - but I am at the end of my rope…
Please help!
Here are links to TWO of my projects where i have tried it:
Please, someone, throw me a life-line!
I am not sure why images sometimes behave not as expected, something to do with their max sizes and the way their width is set up. Just make sure to always put them inside divs and then just replace images as necessary while styling these parent divs to set the width of images and their placement.