Jump to content

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

Recommended Posts

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

Link to comment
  • Replies 6
  • Views 931
  • Created
  • Last Reply
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 !!!

Link to comment

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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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!!!!!!!

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.