How to make this?
I wanted to replicate this design for products page, the problem is that for large screen the filter are visible on left of screen, but for mobile screens, the filters vanished, and filter could be accessed by clicking on filter button, feeling confused how to make the structure, anyone could help me to understand this, manily I am confused how to structure it, thanks
5 Replies
@Hamza Naeem there are many ways you could do this, with Grid, or css Positioning. Simplest solution would be make two filter, one for mobile and one for desktop and tablet. when certain screen size hits just hide one of them and show the other.
that's a terrible practice
it doubles everything, means you have to account for changes like filters and selections and text fields twice...
just use a media query
ok, I would start with mobile first, I would write html and share here, by the way, using two flex childs in flex parent, one for filters checkboxes and second for product cards, this is how we will acheive?
that could work, but it looks like grid might be easier in this case
Ok I will go with grid then