jenyyy4 commented 20 hours ago

Bug Report: Make Mobile-Responsive Page Desktop-Responsive

Summary

The current page design is optimized for mobile devices but does not adapt well to larger screens or desktop browsers. The request is to enhance the page layout and design to be fully responsive on desktop, ensuring a seamless experience across all screen sizes.

Motivation

While the page performs well on mobile, it lacks responsiveness on desktop, leading to:

Poor layout scaling on larger screens (e.g., content appearing too small, oversized, or misaligned).
Limited usability, as desktop users may experience issues like excessive whitespace, hidden content, or overlapping elements.
Inconsistent user experience across different devices.

A desktop-responsive design will:

Improve the overall usability for desktop users.
Ensure that the application is accessible and functional across a variety of devices.
Maintain a professional and polished look on all screen sizes.

Use Cases

Users accessing the page from a desktop browser will experience an optimized layout that utilizes the full screen, with appropriately sized elements and minimal whitespace.

Proposed Solution

Layout Adjustments:

Grid or Flexbox Layouts: Implement flexible layouts using CSS Grid or Flexbox to adjust the page structure dynamically based on screen size.
Media Queries: Use media queries to define different styles for various screen sizes (e.g., breakpoints for desktop, large desktops, and tablets).
```
@media screen and (min-width: 1024px) {
    /* Styles for desktops */
}
```

Specific Changes:

Typography: Adjust font sizes, line heights, and padding to prevent text from appearing too large or too small on desktops.
Spacing: Add appropriate margins and padding to avoid excessive whitespace or cramped content on larger screens.
Image Scaling: Ensure that images scale proportionally without distortion or pixelation.
Navigation Bar: Ensure that the navbar remains easily accessible and appropriately scaled for desktop users.
Content Alignment: Ensure that elements like buttons, forms, and text blocks align correctly and maintain consistent spacing.

Example of CSS Media Queries:


/* Mobile-first approach */
body {
    font-size: 16px;
    padding: 10px;
}

/* Desktop */
@media screen and (min-width: 1024px) {
    body {
        font-size: 20px;
        padding: 30px;
    }
}

jenyyy4 commented 20 hours ago

@Propo41 I would like to work on this issue, please assign it to me.

Propo41 commented 9 hours ago

@jenyyy4 If you are looking forward to making the fonts and sizes responsive, then please go ahead. Also note that someone else is working on the white background issue for some desktop resolutions, which is being worked on by someone else https://github.com/Propo41/bookify/pull/44

Propo41 / bookify

Make Mobile-Responsive Page Desktop-Responsive #45