2

I am working on a Flask / Vue.js web app that I want to have work well with both laptop and mobile browsers. The layout I've chosen is to have a series of mobile-screen-shaped areas that are oriented in a left-to-right fashion when viewed on a laptop browser. Currently when viewed on mobile those mobile-screen-sized areas get shifted into a top-to-bottom orientation, and the user can scroll the screen up and down to go through them all.

What I'd like to do is to have the mobile CSS instead simulate a mobile app by having those cards(?) oriented left-to-right (like the laptop view), and have a swipe shift each one into view or out of view, but always snapping to a single card at a time, rather than displaying 1/4th of the first card and 3/4ths of the second card (for example).

Current laptop browser view: enter image description here

Desired mobile behavior: enter image description here

Nathan Wailes
  • 9,872
  • 7
  • 57
  • 95
  • 1
    you can achive this with the media rule on css, read: https://www.w3schools.com/cssref/css3_pr_mediaquery.asp – Genaro Morales Sep 10 '17 at 05:06
  • 2
    in mobile, you want a [carousel](https://v4-alpha.getbootstrap.com/components/carousel/) right ? – kukkuz Sep 10 '17 at 05:40
  • Genaro, I'm aware of the media rule, but how would I use it? – Nathan Wailes Sep 10 '17 at 05:47
  • 1
    kukkuz, yes, thank you, that's what I want. – Nathan Wailes Sep 10 '17 at 05:52
  • 1
    Do you need to support IE/Edge? Have you considered [scroll snap](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Scroll_Snap_Points)? – Kostas Siabanis Sep 10 '17 at 13:45
  • I wasn't aware of scroll-snap, but it sounds like the kind of thing I'm looking for. It's probably best if I support Edge, and it looks like Safari doesn't support it either. The docs also say "it's in the process of being dropped". – Nathan Wailes Sep 10 '17 at 13:49
  • Not a great support indeed, but I was not aware it is being dropped. Check [this pen](https://codepen.io/ksiabani/pen/JygZRQ), it was the best I could do with scroll snap. It is based on [this](https://css-tricks.com/introducing-css-scroll-snap-points) and it uses a [polyfill](https://github.com/ckrack/scrollsnap-polyfill) for better support (but can't say for IE/Edge). – Kostas Siabanis Sep 10 '17 at 14:31

0 Answers0