Soft Picks section for mobile

[dnbute]

This section of the soft-picks-advanced page does not want to behave properly at some resolutions for mobile

https://main--sunstar--hlxsites.hlx.page/healthy-thinking/soft-picks-advanced1

Examples:

• At 900px the section has a lot of empty space at the bottom because the background picture is really tall

• At 320px the section text overflows

• Other resolutions are a mix of the two, sometimes it looks just fine

@sdmcraft thoughts on how to tackle this? I'd ideally like to keep the green hexagons
cc @ehrro

[sdmcraft]

• At 900px the section has a lot of empty space at the bottom because the background picture is really tall

Does it help if we use a smaller background picture for tablet layout?

[dnbute]

• At 900px the section has a lot of empty space at the bottom because the background picture is really tall

Does it help if we use a smaller background picture for tablet layout?

It's still mobile at 900px, I tried cropping/resizing the picture directly and using that but I still face the same issues, just at different resolutions, the actual actual problem is that the background images don't really care about the content and don't resize accordingly, but for that we'd have to change the whole background image logic

[sdmcraft]

the actual actual problem is that the background images don't really care about the content and don't resize accordingly

I know and its not straightforward as we cannot define CSS styles based on content.
Alternatively, would a pattern like this help ?

[dnbute]

@sdmcraft I created a draft with a CSS solution, not so sure it's the right approach though

[ehrro]

Honestly the most important part is to read the content if the image is below it it doesn't make it readable. I would say we can remove the hexagons...

[dnbute]

Was attempted here #472, closed because it's not high priority and implementation wasn't behaving properly