make ALL full width images span the ACTUAL full width of the screen ( remove crop on mobile)

Site URL: https://www.kailynmoore.com/lumify

Hi there! I'm creating a portfolio site and all of my full width images crop on mobile to the point you can't tell what you're looking at.  I am looking to remove this responsive feature on ALL full width images (not just 1 instance). Ideally, the image would just span the actual full width of the screen regardless of the screen size, so no cropping ever occurs. Can anyone help me with this? I've looked everywhere for a solution and this seems like it would be a common issue.

pw: kailyn

What is access password?

On 10/23/2020 at 6:07 AM, tuanphan said:

What is access password?

kailyn

Try this code for first image

Add to Lumify Page Settings > Advanced > Header

<style>
  @media screen and (max-width:767px) {
  #page section:nth-child(2) {
    min-height: 35vh !important;
}
  }
</style>

10 hours ago, tuanphan said:

Try this code for first image

Add to Lumify Page Settings > Advanced > Header

<style>
  @media screen and (max-width:767px) {
  #page section:nth-child(2) {
    min-height: 35vh !important;
}
  }
</style>

 

Thank you so much! So, I wasn't able to put that in the lumify page header because it seems that is a business/ecommerce feature. But, I was able to put it in the general CSS for the site, and it worked like a charm across the full site!

My only question is, how do I apply this to any instance of a fullwidth image? For instance, if you scroll down you'll see there are 5 other images on this page getting cut off on mobile.
 

I'm surprised squarespace hasn't improved this feature--seems like it would be a common problem. Thank you so much in advance for your help !!!

You can edit page > Add Code Block > Paste above code

to apply specific section, you can use data-section-id

Add to Home > Design > custom CSS

 @media screen and (max-width:767px) {
  [data-section-id="abcxyz123"] {
    min-height: 35vh !important;
}
[data-section-id="xyzabc32134r5"] {
    min-height: 35vh !important;
}
  }

Find data section id with this tool. https://chrome.google.com/webstore/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff?hl=en

14 hours ago, tuanphan said:

You can edit page > Add Code Block > Paste above code

to apply specific section, you can use data-section-id

Add to Home > Design > custom CSS

 @media screen and (max-width:767px) {
  [data-section-id="abcxyz123"] {
    min-height: 35vh !important;
}
[data-section-id="xyzabc32134r5"] {
    min-height: 35vh !important;
}
  }

Find data section id with this tool. https://chrome.google.com/webstore/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff?hl=en

you are an absolute hero. thank you so much!!!!!!!