Jump to content

Help Needed!!! Banner and Background images wont resize for mobile!?!?!?!

Recommended Posts

Peace and blessings! The problem I am currently having is my banner images and background images for section blocks do NOT resize for mobile view. (and / or vice versa)

Website Address is as follows: https://www.goodsocietyworld.com/

I have sized the images to be standard 2:1 wide. This works perfectly for mobile (when I size the block section to small). But when I go to mobile the image is distorted. OR whenever I make the block section perfect sized for desktop, it ends up distorted for mobile.

I've seen codes that allow the TOP banner to stay congruent amongst both desktop and mobile, but the remaining banners in the lower blocks do not stay congruent. 

Hopefully the attached screenshots help out. Greatly appreciate any advice or help anyone has! Thanks!

Sincerely,

GoodSociety

Capture.PNG

Capture2.PNG

lower block desktop.PNG

lower block mobile.PNG

page 2 top banner desk.PNG

page 2 top banner mobile.PNG

page 3 top baner desk.PNG

page 3 top banner mobile.PNG

Link to comment
  • Replies 1
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

Background images are designed to fill a space, so not the best if you want to keep them sized, you might do better to use an image block instead and drag it to the left/right margins, set to fit, and the section height set to fill screen, then on mobile it shouldn't crop (it also won't crop on desktop, which is another benefit!)

Please like and upvote if my comments were useful to you. Thanks!

Zygmunt Spray
Squarespace Website Designer
Contact me: https://squarefortytwo.com/ 
🔌Ghost Squarespace Plugins (Referral link)
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.