Jump to content

How can I see images in full width on mobile without cropping?

Recommended Posts

  • Replies 8
  • Views 1.1k
  • Created
  • Last Reply

Hi. You mean this image?

image.thumb.png.b14b75993c650b8e9e52e59eff00cfaa.png

Add to Design > Custom CSS

/* resize mobile image */
@media screen and (max-width:767px) {
[data-section-id="606464dfbfd0893051c23f02"] {
    min-height: unset !important;
    height: 50vh;
}
}

Do similar for other images. Use this tool to find data section id.

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
11 hours ago, deniselibelle said:

Hello, I mean this page : https://www.rustyling.com/visuals. Every second picture is in full width, but it's cropped in mobile version and I like to change the cropping for the mobile version.

Hi. Can you take screenshot of images which you want to fix?

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

Hi. Try adding to Design > Custom CSS (this code for first image, If it works, I will check for other images)

/* resize mobile image */
@media screen and (max-width:767px) {
[data-section-id="606464dfbfd0893051c23f02"] {
    min-height: unset !important;
    height: 60vh;
}
}

 

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
On 4/27/2021 at 9:35 PM, deniselibelle said:

It works perfectly !!! Can you send me the css for the other images as well? Thank you so much!

Edit above code to this

/* resize mobile image */
@media screen and (max-width:767px) {
[data-section-id="606464dfbfd0893051c23f02"] {
    min-height: unset !important;
    height: 60vh;
}
[data-section-id="606637d7fec9126d3150d213"] {
    min-height: unset !important;
    height: 60vh;
}
}

Repeat for other images. use this tool to find data section id. 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

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.