Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
Leti

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

Question

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

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

image.thumb.png.731caaef9c5faa84ad01ec31c5fb9077.png

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:

image.thumb.png.639f2850eac45a166eaf08ef89f26ca1.png

image.png.5522c9d1c54d08b046675c0c916495bc.png

 

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

 

 

Share this post


Link to post

3 answers to this question

Recommended Posts

  • 0

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):

image.png.9800c9a5780f8abf2cc9c553102bbb8f.png

 

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

image.thumb.png.be15715ac20372bb28a5b9fd72e755fb.png

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

 

Share this post


Link to post
  • 0

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.

Share this post


Link to post
  • 0

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!

image.png.db6d46a63cd3f69d515e4e26e50676db.png

image.thumb.png.af791c6794870fa12f4610a2b8e6cc33.png

(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 😜

 

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...