Expand and colapse on rollover. I need this to work full width and for now have had to use Div sizes as percentages didn't work. Please can someone help?

Design help General
1

Hi,
Thank you for looking at this for me.

Please click on this button link once you are in the URL webflow HP/REPORT:01 Link

https://preview.webflow.com/preview/brickwalljune2015?preview=a709911feabed38bc83505a45c4137d6

2

Hi @juliekaye01, Could you please update your post with some more information so we can help you faster? Things like your read-only link, and screenshots of the elements in question really speed things up.

Posting guidelines can be found here: Posting Guidelines for the Design Help Category - General - Forum | Webflow

Thanks in advance! :slight_smile:
Cheers,
Dave

3

Hi @cyberdave,
Oops I thought I had added my read only link. https://preview.webflow.com/preview/brickwalljune2015?preview=a709911feabed38bc83505a45c4137d6![|690x317](upload://sFcDAO3UNY0YKFVI8wbH9vSd8oD.png)

The panels need to fit full width and when you hover to expand the one with the cursor over and colapse back the others. I think you will see better what I mean when you open up the file. Thank you for helping me :smile:

Julie

1360×616 1.13 MB

4

Hi, on the divs, you have the 1link class set to 520px. I would set those to 33.333% width.

The scrollicon class pictured below, has some massive relative offsets causing overflow, even on desktop mode.

1138×1192 206 KB

I would recommend to not use this kind of fixed px offset to avoid issues with the site being responsive and behaving as it shoud. I would use percentage based widths for layout :smile:

I would check those things first and remove the offsets and set the parent section to overflow hidden.

Try those things and let me know how it goes. Cheers, Dave

5

Hi @cyberdave,
Thank you. I took the icon out and put the percentages on which I had tried before and it has made the rollovers go nuts :frowning:
I just want the panel you hover over to expand width way a little and the other two panels to respond accordingly. Its a head scratcher.

Julie

1084×589 382 KB

6

Hi @juliekaye01, thanks for your update. I see, so on hover over one panel, you want it to grow wider and push the other two panels to the side, or do you want those to just shrink in width? This can be done using an interaction, I will need to look at this a little more :smile:

Cheers,
Dave

7

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