Streaming live at 10am (PST)

Problem with text into div with flex into container


#1

Hello !!

I’m sure what I’m trying to do is simple but…

In my projects pages, I have to blocks of text side by side

I would like that the one to the left be 100 % width so it appears not cropped and the one to the right be at 100 px from the left one.

I have tried many things but don’t find what i’m looking for…

Thank you so much for your help :-):blush:

Lisa


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


#2

Bonjour @Lisa_Laprade,

An option would be to change the ‘Flex Basis’ setting to 100% on the ‘detail projet’ element, and you wouldn’t need the padding on the ‘resume projet’ element for your visual spacing.

Looks like this:

You could make the ‘Basis’ setting anything you want to achieve your desired visual result.

Here are the settings:
detail%20project%20-%20Flex%20Basis%20100%25

Hope that helps.
Regards,
Keiran


#3

Hello KNK,

Thank you so much for your help but the resume project will be to narrow…


#4

It works with some projects but not for all.

Do you have any ideas ?

https://preview.webflow.com/preview/sugarfull-website?utm_source=sugarfull-website&preview=6bbe800fa3119a57c0dbd4c48a2bb56c


#5

Hi Lisa,

The other option is to define a %age width for each element ‘Detail’ and ‘Resume’.

I had a play around with different ratios and found 30-70 to be a good mix.

You can make the %age width anything you want to get your preferred look.

Remember that you’ll need to remove the 100% Flex basis width from the ‘detail projet’ div (previous change in the settings.)

See how that works for you.
Keiran


#6

It works perfect !!!

Tahnk you so much :slight_smile:


#7

Hi Lisa,

Great stuff. Glad I could help.
Keiran