Jump to content

Help! Having trouble with full width images not spanning full width on mobile and alignment issues...

Recommended Posts

This is probably so silly and dumb something that I'm missing. When I view the mobile version in Edit mode in Squarespace, it shows up correctly. When I view the live site on my iPhone, there are gaps on the right sides of the images that should be spanning full width. There's also a few images that should align with the right side of the button, and they stop just short of it, so they aren't aligned. View the images I've attached for reference.

Please help me to align and full width my images on mobile! Any feedback is appreciated. 

Password to site: kadlec

Edit-Mobile-Squarespace_Alignment-Correct.png

Edit-Mobile-Squarespace_Alignment-Correct_2.png

Mobile-Phone_Alignment-Incorrect_2.jpeg

Mobile-Phone_Alignment-Incorrect.jpeg

Link to comment
  • Replies 10
  • Views 973
  • Created
  • Last Reply

Top Posters In This Topic

Can you share your website URL?

It looks like you have the images set to fit so when the container is short the image get narrower than the block width. If you want the image to be full width, make the image block taller, or set it to fill.

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
46 minutes ago, soulflowerprintco said:

Yes, my website URL is https://kadlec-design.squarespace.com/

Sorry, and the password?

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

Sorry, I missed that!

I can't seem to replicate the issue, the images appear correctly aligned when I test it.

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
1 hour ago, soulflowerprintco said:

I'm looking on my iPhone 13 Pro in Safari. I was afraid it was a device or browser problem, and I don't know how to fix that across the board

It does sound like it might be a platform issue, always tricky to diagnose, sorry, I can't especially help here.

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

@Ziggy I figured out that it was actually the image effects I was adding to each image. I was using a parallax type effect on a few of the images, and that was causing it to get thrown off on mobile... Unfortunately, I just had to remove the image effect and opt for static images. I tried finding some code that could work, but most people posting were just directing people to use the image effects in the image block.

I'm not sure if it's just me or other people are experiencing this problem with mobile, but wonder if Squarespace will release and improved version of the image effects to where it works seamlessly on mobile as well. It looks great on desktop.

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.