Problem: Displaying n amount of coupons on mobile for a cashback store. Since we don’t know how many coupons there could be for each store, it’s hard to go with a normal vertically stacked divs of coupon elements. Especially on mobile where vertical space is very limited. On desktop, we have the ability to easily display them in a 2x2 grid due to relatively bigger amount of space and the ease of mouse scrolling. But we don’t have the same luxury in a tiny device like cell phones (compared to desktop).

Solution*:*** If the number of coupons for a store exceeds 4, then we change the layout (on mobile) from a vertically stacked divs to a horizontally scrolling list of divs. This way, we only take up a limited amount of vertical space while making it relatively easy to scan through a big list of coupons.

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/bfcf5983-6396-4230-b7af-f9766b6d1967/coupons_scrolling.mov