Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

how to reduce banner image sizes to fit mobile device?


yanyanyan

Question

Site URL: https://bonnieandgarcia.squarespace.com/

Hi 

I'm using the sonny template and I can't work out how to reduce the banner sizes on my home page to suit mobile view. The banner images are fine when viewed from a computer, but are significantly cropped in mobile view. How do I reduce the size of the banner images so that their entire width is visible in mobile view? 

I've read through other forum posts with the same issue but can't work out how to get the custom css codes to work for my website - thank you! 

My URL is https://bonnieandgarcia.squarespace.com/

password: pablo304

Link to post
  • Answers 10
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

10 answers to this question

Recommended Posts

  • 0

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. 

Link to post
  • 0
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;
}
}

 

Link to post
  • 0
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;
}
}

 

Link to post
  • 0
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

Edited by pkfiyaa
Link to post
  • 0
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

 

Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...