Jump to content

Responsiveness to window size, and distance between elements

Recommended Posts



I have these group of text boxes, each with a different word, around my image. I have positioned them using spaces. 


the code for their color change on hover effect is as below:

@media only screen and (min-width: 640px){
#block-633c5f7450204f1a8cde {
opacity: 0.5;
 transition: opacity 1s

#block-633c5f7450204f1a8cde:hover {
opacity: 1;
transition: opacity 1s;
color: red;


The issue i have is that, these elements are not responsive of course. Is there a way to define their distance with respect to the image and make it responsive? 


You can see how it is in full screen, and how it changes with window size decrease. 




Screenshot 2024-05-10 at 10.53.02 AM.png

Screenshot 2024-05-10 at 10.53.13 AM.png

Screenshot 2024-05-10 at 10.54.21 AM.png

Link to comment

Hi @leylishko!

Your design looks amazing with the correct spacing. Very creative and fun idea.

Questions for you: are the words meant to be links or just readable words? Also, how important is it to you that the words are spaced very tightly to the photo? If you're okay with them being a little further away from the photo, you could set the text blocks to be right aligned, remove horizontal spacing in the section, and align the text blocks with the edge of the image block, then use spaces and/or block positioning to achieve a similar but less exact look.

If they're meant to be just readable words, I may have a more simple solution for you.

If they're meant to be individual links and/or must be their own text blocks, accomplishing the exact above desired outcome for all screen sizes (or even most) would be cumbersome and finicky/require a lot of coding and tweaking.

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


Link to comment

Hi @leylishko,

You're welcome!

If the words are just meant to be read and not links, I think the easiest solution would be to use a graphic design software like Adobe Illustrator, Canva, Affinity Designer, etc. to create the perfect layout with the silhouette > export to png > upload to squarespace.

The words will obviously not be text on the screen (they'll be part of the png), but they'll be guaranteed to have the right formatting no matter the screen size because they're locked into the image.

Alternatively, if you'd like to use text blocks: I think you could create a similar layout that's relatively responsive by using text blocks and manipulating their positions in relation to the photo by using SquareKicker which is a fantastic tool (by @Nick_SquareKicker), examples below:


Desktop (using SK):


Mobile (using SK):


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


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.