Help! - Interaction not being Responsive

Design help Animations & Interactions
1

I created a section on the “Business Card” product description page where when the user scrolls down the Yellow Section shifts left, and reveals the Business Card product description text within the yellow container. While the description reveals itself the image shifts left off the page and has an overflow of hidden set on it.

This seems to work correctly, but when I shrink the browser windows width I noticed that it does not stay centered on the page. Especially if I shrink it down for a smaller resolution the description text becomes smaller, and not centered

Does anybody know a way I can center this?

https://preview.webflow.com/preview/advanced-litho-woocommerc-15a36b36341ed?preview=013dbfa9486494907f1920155c0c0c59

2

Hey there Darius. Just follow the steps below and you should be good to go;

  1. Move the product description left column and product description right column to directly under Product_Description_Section. You do not need the Custom_Container. Set the overflow of Product_Description_Section to hidden

  2. Set Product_Description_Section to display:flex as shown below;

  3. Set width of product description left column to 90%, remove the fixed height and instead set to minimum height of 470px. Also in the flex child settings, set it to dont shrink ;

    232×636 15.7 KB

    Go to the background image settings of the same and set as follows;

  4. Now select product description right column and change its properties as follows;

    230×611 15.2 KB

  5. Now apply the Product Description Slide n Scroll interaction to both the product description left column and product description right column then modify the interaction as follows;
    (i) remove the initial Container Floats Right interaction
    (ii) for the on scroll triggers leave wait 350ms as it currently is but change the Container Slides Left interaction as follows. :- Note the new easing method ‘ease’ as opposed to ‘linear’ for a smoother interaction;

  6. FINALLY, set the background color of Product_Description_Section to same yellow color in the product description right column


**Result**: Responsive Interaction;

1 Like
3

Thanks Alex.

It looks much better now. I had to adjust the image to fit correctly. Seems like I always forget something to ruin my responsive designs. It’s the curse of mobile design. :confused:

1 Like