Hi, please, I have a problem to set the headline image on HP (www.matchie.me) - I want to make it fixed to container - high and width - but responsive to each devices - I dont have a clue how to set it correctly, I tried everything I think.
I know now it seems that it is ok - but I want to make the headline container smaller - decrease the height to 80% -because I want that the logos will be seen on the screen as well. Please could you help me with this? Thank you. Jana
First you have to think what image you will use. As it is set in current hero section it will no t work as you use portrait image that has height 1313 and width 945.
It is possible to give image ratio 1/1 to be a square but it will cut bottom or top depend how you will set img align. But… you have set image have 50% width of Flex wrapper so it mean when height is 100% image will grow according to its width. etc. etc.
You will need different image dimensions to make it work. It is called “image optimisation” that includes proper (optimal) image dimensions for what image is used and smallest size in kb without sacrificing quality.
You should put you idea on paper first (desktop-tablet-mobile) and think about “how to” set HTML structure. I can help but it is hard to imagine you are trying achieve. Other thing is to check other websites in “made in Webflow” to see how others created identical or similar responsive design for Hero.