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

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


Recommended Posts

  • Replies 8
  • Created
  • Last Reply

Top Posters In This Topic

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.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

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


×
×
  • Create New...