How to get exact 50% columns

Hi all. In the same page I have 3 sections with the same exact settings and different contents and I cannot understand why the first one has different columns width (that should be 50%)

it’s here ristorantedatondo.com

where I’m wrong?
thanx

Hi Aldo,

if you want to use a column gap (20px), you need to subtract the gap from both columns.
You can use the calc function to do this.

Apply the following on both containers (text container, carousel container):

  1. width: calc(50% - 10px)
  2. flex-shrink: 0
  3. Switch to the breakpoint where you want the columns to wrap and change the width of both containers to 100%
  4. Add a row gap of your choice to the outer container

Best regards,
timmse

Thank you @timmse , but I still cannot understand why the 3 sections (il ristorante, lo chef, la cucina) with identical settings are in fact different in output. I mean, the 20px column gap is there in all 3 sections but IL RISTORANTE looks different from LO CHEF and LA CUCINA in terms of column width.

Hey,

if you apply the settings mentioned earlier, they will be equal. You haven’t changed anything yet.

Best regards,
timmse

1 Like