Jump to content

Scale image on mobile version

Go to solution Solved by Ziggy,

Recommended Posts

If you haven't already, 'upgrade' the section which will make it Fluid Engine.

Then you can drag the section up on your mobile view so that the image is landscape.

Sam Crawford | by Crawford.
Multi-award-winning Squarespace expert
💸 How I make $500k/year designing Squarespace websites: Watch the video
📱 Hire me to build your Squarespace website: calendly.com/bycrawford/call
Did my comment help? To help others benefit, leave a like and mark my answer as 'best'. This lets users scroll straight to the solution they need.
Link to comment
  • Solution

As @bycrawford said you should reduce the number of grid rows, but since you have images layered in that section you may want to adjust their position first.

The reason that the image takes up the full height of the screen on mobile is that you have this code in Custom CSS that is forcing the section to be full height (100vh):

@media screen and (max-width: 767px) {
section[data-section-id="64e54f9bb946601f10e2af9e"] {
    min-height: unset !important;
    height: 100vh;

If you remove that the section height will then be set by the section settings of 33vh (small in the section settings) and by the contents of the section.

To summarise; remove code, rearrange images and reduce the number of rows. 

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

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...

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.