-_- that's it, pre-set css properties are too annoying

Why tabs don’t behave like normal elements with flex box. I provided a read-only link. I countered similar problem with grid. if it is because of some pre-set css properties, how can I turn them off?

https://preview.webflow.com/preview/mohamads-awesome-site-4e6d24?utm_medium=preview_link&utm_source=dashboard&utm_content=mohamads-awesome-site-4e6d24&preview=5c3491d359e6ed26a9e43a3067cc9aa8&workflow=preview


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Hey @m7md20091 can you provide more details about what behavior you are expecting? All Webflow components have some basic CSS style so they appear in a usable format right off the bat and there isn’t an easy way to remove that.

I’ve been a Webflow user since 2014 and hopefully I can help you figure out a solution.

Edit: if you’re trying to get the tabs menu + the tabs content to each take up 50% of the screen I’d setup each to have widths of 50% and maybe the main tabs component with a width of 100vw

hey thanks for replying. I provided both the behavior that I expected and the behavior that it is showing.

https://preview.webflow.com/preview/mohamads-awesome-site-4e6d24?utm_medium=preview_link&utm_source=dashboard&utm_content=mohamads-awesome-site-4e6d24&preview=5c3491d359e6ed26a9e43a3067cc9aa8&workflow=preview

…Hey :slight_smile: Still not clear what the behaviour you were expecting is.

My first suggestion, have a study of the Webflow Tab University page, then start again.

Make sure you name your classes. This was the biggest mistake I made when starting out with tabs. It always gets messy when you don’t. From the relevant part in the University:

You’ve set the Tabs to Flex, which I’m not sure if you need to do at this stage. I’d set it back to Block. Start from scratch.

Then if you could be a bit clearer about what it is you want the tabs to be doing :slight_smile: That would be helpful.

I have updated the read-only link, can you take a look now

https://preview.webflow.com/preview/mohamads-awesome-site-4e6d24?utm_medium=preview_link&utm_source=dashboard&utm_content=mohamads-awesome-site-4e6d24&preview=5c3491d359e6ed26a9e43a3067cc9aa8&workflow=preview

.

…you’ve got Tabs set to display FLEX.

Set it to display BLOCK, and that will get the Tabs behaving the way you want it to.

both parents have the same exact class “flex”. Why don’t their childern behave the same?(Am I missing something(:upside_down_face:)

https://preview.webflow.com/preview/mohamads-awesome-site-4e6d24?utm_medium=preview_link&utm_source=dashboard&utm_content=mohamads-awesome-site-4e6d24&preview=5c3491d359e6ed26a9e43a3067cc9aa8&workflow=preview

                                                       both parents have the same exact class “flex”. Why don’t their childern behave the same?(Am I missing something):upside_down_face:

Webflow - Mohamad's Awesome Site .

Have you tried what I suggested yet?

Either set the Tab Component to Block, or set it to Flex Vertical. Either should get you what you want. Maybe. I’m still not clear on what you want.