Streaming live at 10am (PST)

Images/link block look different on published page than in preview

Attached are the two screenshots. The first is what the ‘school images’ looks like in the preview and the second is what they look like when I published the site. Is this definitely a bug or could it be something else? I checked the elements and they are the same as the rest.

Here is the link to the site.

Hi @mrsnewbie, thanks a lot for the question and sorry for the trouble. I am here to help. Could you also help to share the read-only link to the site?

Thanks in advance!

Hi @cyberdave Here you go:

Hi @mrsnewbie, thanks for your patience. I checked the site and looked at the site design and in the published mode, and the styling looks the same to me:

I believe the issue may be in the structure, how this elements are setup on the page.

It looks like you are using columns with a link block set to be absolutely positioned over the column and image. Since the link block is absolutely positioned and the image is not, the images are resizing as the white space increases or decreases, but the resizing is uneven.

I would highly recommend to change this to put the image inside the link block which will cause the image and link block to resize evenly.

I hope this helps, let me know if you have any questions.

I see what you’re saying. The effect I’m trying to get is the hover on this page:

My best guess was to create a div overlay that’s hidden until I hover over the block. However, the problem I encountered with that is, in order to do that I need to position it as relative but when the image resizes, the div overlay won’t resize with it. I apologize in advance if my explanation is confusing. :slight_smile:
Can you instruct me on how best to accomplish the hover effect on the squarespace page?

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.