Responsiveness to window size, and distance between elements

Hi, 

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. 

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.

Hi @NoahSnowdayDesign

thank you so much!

They are just readable words. 

my preference is they are aligned with the image but I'm open to exploring how they would look if putting them on random locations on the landing page. 

thanks a lot!!

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):