How to display poster image on desktop and change it to simple color background on mobile?

Site URL: https://www.raconte-moidessalades.com

Hello,
I have trouble with the display of my poster images both on tablet and mobile:

Here is the desktop view...
It is the block in the center with the light gray background.
Since I couldn't add my pictograms properly around the text, I made them into a single image on the background.

Obviously, it's all messed up when you are on mobile or tablet view 😭
Here are the Squarespace previews so you can see:

Unfortunately, I have this block present on each one of my post pages...
But since I was carefull not to use this poster image disposition nowhere else in the website, maybe I have a shot at trying to act on this
so it can affect all the blocks at the same time.

I am thinking the easiest would be to not display the image and add a color background to the text (same light gray than the current image)...
(pity for the pictograms but I prefer to have it "nice and clean" and have a little info missing rather than having things looking messy)

I tried a few things but I'm not there yet.
The closest I got was this (but it creates even more problems so that's not good)
@media only screen and (max-width:1200px) {
.sqs-block-image .design-layout-poster .image-card-wrapper> {
  width: 100%;
  height: 140%;
  margin-top: 20%;
  margin-bottom: 20%;
  background: rgba(0,0,0,0.5);
  }
.sqs-block-image .design-layout-poster .sqs-image-content> {
  display: none;
  }
}

If someone can help me fix this??
Or if you see something else to try?

Letizia

I found another begining of solution... just in case it helps someone help me 😉

@media only screen and (max-width:500px) {
.sqs-block-image .design-layout-poster .image-card-wrapper> {
  background-color: #f2f3f3;
  height: 125%;
  }
}

Works good for the mobile view (except it hides the button right under it):

...but still far from ok for the tablet view 😭

And for now, I found the way to "tweak" the text but not the image...
I'll keep looking.
Don't hesitate to chime in 😉
Sometimes it takes 2 people to find a solution

I suggest not using the poster layout for this, but an image of your dish followed by a strip image of the icons then the recipe. That will achieve the same desktop layout but won't be so difficult on mobile.

Indeed!!
...but now I kinda like how it looks on desktop
And I already improved it a little bit more from what I sent before.

On mobile, it is good, the light gray block is aligned with the back of the picture and now you can see the block that was hidden under it.
It is the tablet version which is a little off still... I managed to make the gray block start after the picture, it just overlays a little with the text under - just the first couple lines max and it is not the recipe yet so it doesn't really matter. And to make it "lighter", I put the gray background at 85% opacity, so that there is a little transparency... Not perfect but will waiting to see if someone can help improve it even more, it will do!

(Those are screenshots of the squarespace preview
I checked: on my smartphone it looks exactly like that... and it looks better on my own tablet, the gray background covers more text than here)

personal note/  I am an art director so that's why I like it "pretty" 😉😁 ...even if it's not the most convenient or easy
and there is a certain satisfaction when you finally find something that works 😜