Streaming live at 10am (PST)

Different images for desktop and mobile

#1

Hi! I have a quick question.

First here is my read-only site: https://preview.webflow.com/preview/bitz-redesign?utm_source=bitz-redesign&preview=93ebbab3b4ee035adbcf631398d801ca

If you go to the ‘For Customers’ page, in the ‘How it works’ section you will see three mockups with steps. For desktop I would like to keep it that way but if you change to mobile, I would like that the mockups are half shown, cut like you can see here https://imgur.com/SGz0sE4 . So, still one step on top of each other but with a shadow effect below like I currently have for the different sections in the page.

I was wondering if It’s possible to upload different images for desktop and mobile so that I can upload a cut version for mobile, keeping the full for the rest of the devices.

Or is there any other simpler way to achieve this? Also considering that I would somehow need a shadow effect below each cut image.

Looking forward to hearing from anyone! Have a nice one!


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

#2

Rather than having 2 sets of images, you should just use the ones you already have and cut them using overflow:hidden.

When you have a very diffferent design for desktop and mobile, using the same assets, don’t hesitate to design 2 sections and make them visible only for one device. So one section designed for desktop, one for mobile, and you swap the visibility using display:none.

#3

Clear! Will try this, thanks vincent!