Flex div taking gap for before and after element

Design help Layout & Design
1

Hi There,

Right now I have one div with flex and given gap as well but not sure why &:before and &:after taking a gap at start and at the end as well. It should not be like that.

The CMS page links is https://heatso-landing-page-1-0.webflow.io/category-page

Please let me know if you have any questions or doubts.
Let me know if I missing something :slight_smile:

Thanks,
Chirag

flex_gap
flex_gap1920×963 144 KB

2

It should be something on your side as I have tested flex space-between and it works as expected. hard to say as no one see your read only. :man_shrugging:

3

https://preview.webflow.com/preview/heatso-landing-page-1-0?utm_medium=preview_link&utm_source=designer&utm_content=heatso-landing-page-1-0&preview=6e06b69c996bc7cf9084ccd98fd376dc&pageId=65ebdfc8e43b331a7946004f&itemId=65f1958f57fa3828e6969785&locale=en&workflow=preview

4

Hi @chirag1983 the simplest solution is to stop using TEXT columns for website layout. More info why it is a very bad approach you can find here on forum or on internet.

Use standard div elements instead and all should work as expected.

5

Hi @Stan Can you please give me more information on that? I really did not get any idea on that.

6

Sorry I do not have time to teach basics as all informations are on internet. Basically text columns should be used for long text to be spliced to several columns like in newspaper.

These text columns were used around 2000 when websites were made by tables and weren’t responsive. Now we have Flex and Grid to make our (developers) life easier.

7

I think this is not the solution for my problem.
Please give me a solution for that.

8

What other solution @chirag1983 ? I have provided already one that will solve your issue!

9

This is the not the solution. Please pass this topic to another person.

10

You have your card in text columns , use div elements. Hope this bring more light into what and how to solve your issue.

text cols

No problem

good luck and have a great day

11

No problem I have fixed issue with display grid. Thanks anyway

1 Like
12

I have tried your approach but I can’t do that. Do you have different WF designer as in my account Grid is greyed out! Just posting this video with solution that works if someone else will have similar issue.