Jump to content

How to place an image block so that it sits in the right place

Go to solution Solved by nick_sh,

Recommended Posts

I have a hero section that has a background image and two image blocks sitting on top. One of the smaller image blocks contains an icon and has been placed correctly on desktop and mobile, but as soon as the screen resolution is in between those two sizes it starts floating around in a weird place. 

Below 600px and above 1200px the placement is fine, but if the screen width is between 600-1200px then it looks strange.

Screenshots below.

Page is: https://www.hoptroff.com/product/software
Password: Test

Is there any way (maybe through CSS) that I can solve this? I'd be happy even to just make it disappear between 600-1200px.

 

Mobile: okay
image.thumb.png.a68d41ba1f7e2b958eec273666039737.png 

Desktop: okay

image.thumb.png.9809cc9680e6ca0563311e3ff41e74a5.png

In between size: the icon is floating off by itself

image.thumb.png.b3b63d377e84115b7c7d72d0ba4f545b.png

Link to comment
  • Replies 5
  • Views 1.4k
  • Created
  • Last Reply

Top Posters In This Topic

Hi ClaireHops,

This is Noah from Snowday, nice to meet you!

This isn't a Squarespace or code based solution but something that I do a lot when faced with the problem you're facing: have you thought about using a graphic design software to add the icon to the photo exactly how it should be, exporting as a .png, then uploading that new .png where the current photo of the computer is, and deleting the separately uploaded icon altogether?

This solution is pretty simple, doesn't require any extra code, and ensures that the icon is exactly where you want it no matter the screen size (because it can't move!).

I know it may not be the exact solution you were looking for, but I thought I'd share because this is a strategy that I use for graphics all the time. Let me know if this helps!

Noah Olson
Web Design, Brand, Marketing
❄️ Snowday Design

 

Link to comment
  • 3 weeks later...

@Snowday Hey, thanks for the reply! The laptop has an animated gif in it that I made in AE. I could put the icon over it within the animation, but I kind of like the feeling of layering and motion that exists with the two elements being separate. 

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.