Challenged by Tab Menu with Flex Box elements

Design help General
1

Hi there,

I am working heavily on our website for a major overhaul in sync with a press release tomorrow. Unfortunately, I am having trouble with some Tab Menus. Here is what is going on:

Go to ‘Cloud Advisory’ page. Have a look at the tab menues. I introduce a Flex Box Div to have the text center horizontally, and resize for different screen sizes. Issue:

ISSUE 1

  • The active tab pushes the label down. I have looked for settings forcing this, but cannot find it. – On the phone portrait setting, I am using tabs with 100% width on top of each other. There the same text moving up/down for active/passive tabs is happening.
  • Here is the picture:

ISSUE 2

  • On the phone portrait setting I am having another issue. I like the tabs to be covering the full width of the phone, but they do not. I went to several elements and made the width 100% without success.
  • Plus here the active text is in good position, but the passive tabs are moving up.
  • NOTE: I tried to turn off the flex box settings since my text should fit in one line without that feature … not sure if that helped or created issues.
  • Picture:

576×710 44.7 KB

Thanks a lot for your help :slight_smile:
Swen

Here is my public share link: Webflow - Ocean9
(how to access public share link)

2

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