Ajdustments to do for the layout when the app has the minimal allowed width. By width, it is means the entire app's width
1. Home slideshow: The home slideshow center image should fill the entire width if the app width goes below 815 px. In other words, the 2 images on the side are hidden, and only the center image is displayed on the entire width
2. Details pages header: In the details page header, we should display the reduced header if the app's width goes below 980 px. In other words, the reduced header wich normally appears after scrolling down, is displayed directly without scrolling for width below 980 px
3. Details page filters bar: below 980 px, the "sort" icon is displayed instead of the "recent" filter label. We display only the "sort" icon, without label to save space (see icon below)
Pierre henri Seylan on September 23, 2019:
4. Details page filters bar 2: Below 930 px width, the space between the filters should be reduced, progressively until 22px space between the filters. Note: this is also to do for the search bar, in other words all the space marked by the red arrow below.
Pierre henri Seylan on September 25, 2019:
Feedback #2. Details pages header: Here, the following should be done: If the app is in small size and the header is reduced, then the header should be enlarged again if the app size is increased past 980 px. This is done only if the page is not scrolled (which triggers the reduced header even at big sizes) 5. Details page filters bar 3:
Comments
Pierre henri Seylan on September 14, 2019:
Ajdustments to do for the layout when the app has the minimal allowed width.
By width, it is means the entire app's width
1. Home slideshow:
The home slideshow center image should fill the entire width if the app width goes below 815 px.
In other words, the 2 images on the side are hidden, and only the center image is displayed on the entire width
2. Details pages header:
In the details page header, we should display the reduced header if the app's width goes below 980 px.
In other words, the reduced header wich normally appears after scrolling down, is displayed directly without scrolling for width below 980 px
3. Details page filters bar:
below 980 px, the "sort" icon is displayed instead of the "recent" filter label.
We display only the "sort" icon, without label to save space (see icon below)
Pierre henri Seylan on September 23, 2019:
Below 930 px width, the space between the filters should be reduced, progressively until 22px space between the filters.
Note: this is also to do for the search bar, in other words all the space marked by the red arrow below.
Pierre henri Seylan on September 25, 2019:
Here, the following should be done:
If the app is in small size and the header is reduced, then the header should be enlarged again if the app size is increased past 980 px.
This is done only if the page is not scrolled (which triggers the reduced header even at big sizes)
5. Details page filters bar 3:
Below a certain size, the space between the filter should be reduced to avoid overlapping like showed in the video below:
https://www.dropbox.com/s/7qbumsoe4k5g5zv/responsive%20filters.mov?dl=0
This should be done so that the space between each filter remains equal.