Fluid Header Image in Flexbox

Hey there, back again, so far over the last couple of days I have been able to add color to the separate columns of my template and it is now mobile responsive, very pleased. The next step is to add a header style image. Which I have already done, so my question is how to get it to shrink down as I scroll over to phone and ipad size screens? At the moment it is not fluid. As usual thanks for any advice!

Hi you can maybe do this by implementing the following CSS rules:

img{
width:100%;
height: auto;
}
1 Like

Thanks, that worked well, I was expecting a reference to a container wrap? But this method was simple and effective, cheers! I did reduce it to 90% and that was closer to what I was seeking, so good to have an option

Yeah maybe don’t use img selector and use instead one specific to your image because otherwise it will apply to all images

Yes I found this out and gave the top image an id of banner, then applied the css rules, cheers

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.