Tabs height issue

Design help Animations & Interactions
1

Hello,

I am using tabs in my design. The third point of “3. Documentation” jumps when I switch the tabs because the height of both the tabs are different. I cannot change the content inside each tab. How can I make sure that tabs & the image don’t jump? Reference: Zight Recording 2025-3-21 a...

Here is my public share link: Webflow - MNM Architecture

Thanks in advance.

2

Hello @bhavyarao, yeah so you have that jump behavior because you have both your process-left and process-right divs set to Align center

Screenshot 2025-03-21 at 12.45.40 PM
Screenshot 2025-03-21 at 12.45.40 PM474×206 7.65 KB

just change them to align top, and the misalignment jump should not happen again. I hope this helps.

3

Thanks @Pablo_Cortes . Changing it to top align disturbs the design. I want them to be center aligned to the image on the left.

4

Hey @bhavyarao, yes, aligning both elements to the top will change your design, but you can just add padding to the contend div to accommodate your design. Because if you have both left and right divs aligned to the middle and you change the height of the content when you change the tab, you will always have a jump, but if you aligned them to the top, when you change the tab, the content will just grow downwards, keeping the top alignment. I hope this helps.