Streaming live at 10am (PST)

Difficulties to adapt an element in responsive

Hello,

I have difficulties to find why the pricing section is “bumping” on hoover (mobile view).

I can’t find any interactions, I don’t find my error.

Could you help me ?


Here is my site Read-Only: https://preview.webflow.com/preview/yacines-stunning-project?utm_medium=preview_link&utm_source=designer&utm_content=yacines-stunning-project&preview=688c4a2b572bbffbd15aacb8da5e1610&pageId=5cef0480635ae7eb966e48f5&mode=preview

Hi

Sorry, couldn’t find anything that “bumping” - can you share video of the “bumping” :slight_smile:

Go to the mobile breakpoint and hover over the pricing table

Hi @shokoaviv ! I forget to mention it : it’s only in the mobile view :slight_smile:

@lemundibu you have a transform SCALE set on the Container symbol at that breakpoint. Remove it and will stop scaling on hover. If you want the scale to remain but without the “zoom” effect, simply apply the scale as an “initial state” for a legacy x1 interaction.

Thank you !!! @studiopowell

My problem is resolved !

An other question concerning this container : How can I display responsively the container. Some part of the pricing are out of the container and don’t appear on main mobile views.

Regards

The css grid for the pricing div is having a hard time compressing beyond .25fr, which is it’s minimum. To circumvent the problem, I would advise, at that breakpoint, changing the .25fr columns to 25vw columns and setting the Grid to “Overflow: hidden”

Should take care of your issue. :slight_smile:

THANKS !!! :heart_eyes::heart_eyes:

1 Like