Responsive Design

WriteOff uses Bootstrap and custom CSS to provide layouts that adapt to different screen sizes.

Bootstrap

Bootstrap is used throughout the application for its responsive grid system, navigation, buttons, forms, cards, spacing utilities, and other interface elements.

Examples include:

• container
• row
• col-md-*
• col-lg-*
• navbar-expand-lg
• collapse
• d-flex
• responsive margin and padding utilities

Desktop Layout

At larger screen sizes, navigation links are displayed horizontally. Product cards can be displayed in multiple columns, and views such as Product Detail and Cart can place content next to each other.

Mobile Layout

At smaller screen sizes, Bootstrap's grid causes columns to stack vertically. The navigation collapses into a hamburger menu, and product information, forms, and cart content reorganize to fit narrower screens.

Additional CSS media queries are used to adjust the Home page hero section, text sizes, navigation spacing, and other visual elements.

Responsive Testing

The website was tested at both desktop and mobile-sized browser dimensions. Testing included resizing the browser and using portrait-oriented dimensions to verify that content remained usable and readable.

Simulated-Phone/Portrait View:

Desktop View: