how to reduce banner image sizes to fit mobile device?

I don't see banner. Which banner?

Hi 

All the images on the home page are banner images, not image blocks. Originally I wanted the images to span the full width of the website so I used banners, but the images were a bit overwhelming at that size, which is why they're shown smaller. 

2 minutes ago, yanyanyan said:

Hi 

All the images on the home page are banner images, not image blocks. Originally I wanted the images to span the full width of the website so I used banners, but the images were a bit overwhelming at that size, which is why they're shown smaller. 

Add to Home > Design > Custom CSS

This code for first banner. If it works, I will send other banners.

@media screen and (max-width:640px) {
section#first-frame figure img {
    width: 100% !important;
    left: 0 !important;
    height: auto !important;
}
section#first-frame {
    min-height: unset !important;
    height: 30vh !important;
}
}

Yes that worked perfectly!! 

I just changed the details of the code so that it would work for the other banners - thanks so much for your help! 

@tuanphan

I'm having similar issues with the following pages: https://www.prakritikumar.com/work/nyt-cooking

The image is getting cropped on mobile, I want the entire banner to show up on mobile instead. 

2 minutes ago, pkfiyaa said:

@tuanphan

I'm having similar issues with the following pages: https://www.prakritikumar.com/work/nyt-cooking

The image is getting cropped on mobile, I want the entire banner to show up on mobile instead. 

add to home. > design > Custom CSS

@media screen and (max-width:767px) {
body#item-5e6ec14fea160c0c82cbd6fe #page section:first-child {
    min-height: 30vh;
    height: 40vh;
}
}

31 minutes ago, tuanphan said:

add to home. > design > Custom CSS

@media screen and (max-width:767px) {
body#item-5e6ec14fea160c0c82cbd6fe #page section:first-child {
    min-height: 30vh;
    height: 40vh;
}
}

 

@tuanphan Thank you! Will this work for other pages as well, as long as I change the body #item? Such as this page: https://www.prakritikumar.com/work/marketing-virtual-summit

@tuanphan 

Thank you for your help! I'm trying to change the banner on this webpage as well so it fits mobile, but it's not working. I used your same code and changed the ID number.  https://www.prakritikumar.com/work/marketing-virtual-summit

14 hours ago, pkfiyaa said:

@tuanphan 

 

Thank you for your help! I'm trying to change the banner on this webpage as well so it fits mobile, but it's not working. I used your same code and changed the ID number.  https://www.prakritikumar.com/work/marketing-virtual-summit

this id

Quote

body#item-5e6ec14fea160c0c82cbd737