EPIC - Mobile Responsiveness + Styling Consistency

[Caposto]

Description

This EPIC contains some basic guidelines for tailwind styling when creating components and making them mobile responsive as well as definition of done for completing this EPIC. For example, it will highlight what text-size classes to use and what padding to use when creating components so that all the pages are consistent

When using breakpoints, I advise to take a mobile first approach where you should try to design with the mobile view in mind prior to the web view as most people are seeing our site from their phone.

Additionally, try to stay away from use the max-<breakpoint> class like max-sm: vs sm:. Default breakpoints, using just <breakpoint>:, handle all cases where the screen is that size OR larger. Thus, classes without any breakpoint prepended work by default for all screens and up, then get overrun by the breakpoint specific classes. This makes sure we have all of our screen sizes covered and maintain consistency with how the rest of the responsiveness in handled throughout the app.

DoD

List of remaining pages to make mobile responsive (as of 2/7/2025):

• Home Page
  • Issue Home Page - Mobile Responsiveness #311
  • PR Home page responsiveness #318
• About Page
  • Issue About Page - Mobile Responsiveness #301
  • PR About Page Mobile Responsiveness #305
• Projects Page
  • Issue Projects Page - Mobile Responsiveness #302
  • PR Projects Page Responsiveness #309
• Student Pages
  • Issue Community Pages (Student & NPOs) - Mobile Responsiveness #265
  • PR Feat/community pages responsiveness #270
• NPO Page
  • Issue Community Pages (Student & NPOs) - Mobile Responsiveness #265
  • PR NPOs page responsiveness #293
• Partners Page (once it is created)
• Blog Page (once it is done)

List of remaining large PRs needed for full mobile responsiveness:

• Hero Section Mobile Buttons
  • Issue General Hero Section Mobile Responsiveness #313
  • PR Adjusting Hero buttons and min size #325

Hoping to have all of these done by 02/13/2025

Tailwind Styling Guidelines

These are mainly in reference to the mobile view changes.

Padding

• Horizontal
  • px-8 lg:px-40 - recommended to be used around the parent div of component
  • for hero section the parent div should use px-6 md:px-12 lg:px-32
• Vertical - you can use whatever padding or margin you like here but ensure it is consistent with the spacing between the other components/ sections on the page

Typography

• Section Heading - text-4xl lg:text-5xl
• Heading 1 - text-3xl lg:text-4xl
• Heading 2 - text-2xl
• default text - text-xl
• accent / less important text - text-lg

We try not to go any smaller than these sizes to ensure readability and accessibility