Solve the overlapping text in interoperability page with an elegant solution

[bfabio]

This is the render of https://next.developers.italia.it/it/interoperabilita/ on my system at 1128x635 pixels:

The text in the first column overlaps.

[MMMJB]

The static heights for .content-section defined here allows the content to overlap. Either take the naive approach and increase the heights in the media queries or set it to something like max-content with the tradeoff of getting rid of the nice column text alignment.

[bfabio]

@MMMJB do you think there's a way to have the best of both worlds?

[MMMJB]

You could probably make it work with viewport units. I'd recommend playing around with vh values and then clamping them between a min and a max.

[HeetVekariya]

• Hey we can do solve this by just adding a 35px margin above all the "Strumenti correlati".

• You can see in the screenshot.
  

• If this is issue is still open and my solution finds you well, can you please assign it to me ?

[Shashankpantiitbhilai]

I will handle it ,please assign it to me

[bfabio]

Thanks @Shashankpantiitbhilai, note that the source for that page is actually in this repo: https://github.com/italia/next.developers.italia.it

[HeetVekariya]

@bfabio is my solution correct ?

[bfabio]

@HeetVekariya whoops, sorry, I missed your proposal. I don't think it's the right one, because it uses a magic number of pixels that won't adapt with the content, but fix just the symptom.

[smonolo]

@bfabio I pushed a fix that temporarily solves the issue, although I don't like the solution that much.