How do you make buttons responsive? (Over main image)

David H shared this question ago

Answered

I am building a responsive/liquid website prototype.

On the desktop version, I have a main image with 3 buttons that overlap the image (near the bottom of the image). There is no problem making the image liquid, change size with the window size. However, how do I ensure the buttons follow the image?

The buttons and image are in the same table cell. This cell is by necessity free form layout (because of overlapped elements).

Is there a way of doing this? I'm not finding a way other than "pretending" the buttons are there by adding them to the actual jpg itself (which is not a solution IMO, and would complicate the hotlinks)

Thanks

The same question

Replies (2)

Danielle Schneider ● 4 years ago

Hi David,

We're assisting you with this in the customer support portal.

Best,

Danielle

Reply URL

geteasyidea ● 3 years ago

I would need the same article

Reply URL

Danielle Schneider ● 3 years ago

Hi there,

We're working on creating a tutorial for this right now. It should be up soon. In the mean time, here's an explanation of how to create a responsive prototype:

The two properties you need to use to make responsive prototypes are pin positions, and % widths/heights.

Pin Position - find in the Properties palette, under the section Position. Pin positions will pin an element to a certain part of the screen. If you want to make a 'sticky' header, use pin position, and change the 'y' parameter to 'pin to top'.

% width/height - find in the Properties palette, under the section Size. % size will change the size of an element to be responsive to the size of the screen.

Check out the attached prototype as an example. Let me know if you have any questions.

Best,

Danielle

Files:

URL