Jump to content

Header image cropping doesn't translate well to mobile

Go to solution Solved by Ziggy,

Recommended Posts

I'm building my new website and am having a lot of trouble making large header images work well on both desktop and mobile. If I shape/crop it correctly for desktop, it looks terrible on mobile.

I could set the header to work for mobile (small header height instead of large) which technically does also work for desktop but, as a photographer, large, powerful images are super important. So I need the largest possible image I can get.

I could also center the subject in the image so that it shows on the mobile crop. But centered subject is terrible composition.

Is there any way around this? 

desktop view 2.PNG

mobile view 2.PNG

desktop view.PNG

mobile view.PNG

Link to comment

Try this method, it should allow you to use CSS to customize the section height on mobile:

https://www.beatrizcaraballo.com/blog/index-height-mobile

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

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
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
  • Solution

You could create the height by utilizing blank rows and uncheck the "fill screen" option on the section settings. Then you can control the number of row on desktop and mobile separately.

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

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
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
3 minutes ago, ExclusiveImage said:

This worked perfectly! Thank you!

Brilliant! Can you mark my post as the solution?

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

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
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.