Trying to turn a 3x2 group of tiled images from desktop into a slider horizontal slider on mobile. I dont know how to turn the tiled images from desktop into a slider on mobile without effecting the desktop… i only want the slider mobile. also, the tiled images i made with CSS Grid, and it seems that when I try to delete the grid on mobile it also removes it from the desktop… not sure how to unlink it? img for reference! thanks everyone.
You could take this approach. Take the block containing the tiled images and hide it on mobile. Then create a slider and hide it on breakpoints larger than mobile.
Just consider that when an element is hidden, the browser will normal download the assets. So that can create a additional load on mobile clients. So I would consider image sizes and optimization of them to ensure the best possible performance.
I was looking for a solution and figured out an option:
Use Webflow’s slider - and update the mask to flex and wrap for desktop.
You are not able to click and change the mask layer directly… you need to add a new div anywhere, give it the same mask class name and style from there. You can delete that div when done styling and add it back whenever changes are needed.
Hi,
Did you follow his directions step-by-step? He mentions the mask cannot be switched to flex box so you have to style generic div using the mask’s class name.
With this new div (using the same class name as the mask) set the display to flex box. Now go back to the real mask element. It should now be flex box.
Need to make this happen, got any advise?
