[TODO] Mobile styling

[gbowne1]

I would like to support the following breakpoints

1920x1080 (desktop)
1884x905px (my desktop CSS view)
1366x768
375x667
360x640
360x572 (my mobile CSS view)

should cover most other devices.

(as shown on https://screensizemap.com/ and https://whatismyviewport.com)

[shivm29]

Hey @gbowne1 ! Please assign me this.

[gbowne1]

Ok @shivm29

[gbowne1]

@ 1366 x 768 needs the blue and green buttons on the right styled so that it does not appear one on top of the other.
@ 375 x 667 and other similar sizes the buttons do not appear and unable to scroll left to right to view them
@ 1920 x 1080 has a bit of margin/padding on the left side of the view that is hard to see that its there

[gbowne1]

Have you been able to work on this @shivm29 ?

[gbowne1]

@BlackBond06 @LOGESH-B

Ideas?

Use the responsive view of Chrome & Firefox & Edge and look at these specific breakpoints to see what we can do about the buttons being on top of each other when the viewport is reduced.

[BlackBond06]

@gbowne1 mobile styling would be a tricky one with the current way the books are displayed. My suggestion is: we should replace each book with a custom book cover with each book cover containing details of the book such as the title, author, isbn, publisher, year, etc.

What this means is, instead of the current way where all these book details, each having it's own row, and occupying space, would be replaced with a custom book cover with details of each book within that cover. This way mobile styling becomes not too difficult. Most online book stores use this approach.

[gbowne1]

@BlackBond06 interesting. I thought about a layout change that would make mobile view nicer.