MKCreatives Posted June 25, 2020 Share Posted June 25, 2020 Site URL: https://www.themkcreatives.com/about Hey guys! I just launched my site and I still have a few things that I can't get done. I tried several CSS I found on the forums trying to adapt them to my site , but can't get it right! I'd like my banners to be some sort of 16:9 when on mobile, rather than the whole 4:5 size as it takes almost the whole phone screen. This will have to be on all pages with banners except the homepage though. You can see an example on this page https://www.themkcreatives.com/about and all other pages like this one too https://www.themkcreatives.com/greece. Ideally, at the same time, the images would also need to scale with the container to show the content on mobile not cropped. Thank you guys! Link to comment
rwp Posted June 25, 2020 Share Posted June 25, 2020 @media screen and (max-width: 999px) { .js-page-banner-image { height: 100% !important; } .page-banner-wrapper.page-banner-has-image { height: 75vw !important; max-height: 72vh !important; } } Link to comment
MKCreatives Posted June 28, 2020 Author Share Posted June 28, 2020 On 6/25/2020 at 1:59 PM, rwp said: @media screen and (max-width: 999px) { .js-page-banner-image { height: 100% !important; } .page-banner-wrapper.page-banner-has-image { height: 75vw !important; max-height: 72vh !important; } } Thanks RWP. That works, but some images don't resize correctly and get sort of squeezed into the frame like the one attached Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment