Creating a responsive design ensures that your application looks great and functions well on devices of all sizes. To achieve this, utilize the predefined SCSS mixins defined in styles/utils.scss. These mixins allow you to apply styles conditionally based on the screen size, ensuring that your components are adaptable and responsive.

​
Predefined Media Query Mixins

  • @mixin for-phone-only: Targets phone screens with a maximum width of 470px.
  • @mixin for-tablet-only: Targets tablet screens with widths ranging from 471px to 1300px.
  • @mixin for-mobile-tablet-only: Targets both phone and tablet screens up to a maximum width of 1300px.
  • @mixin for-desktop-only: Targets desktop screens with a minimum width of 951px.
  • @mixin for-large-monitor-only: Targets large monitors with a minimum width of 2100px.

​
Usage Example

To make your components responsive, include the appropriate mixin within your SCSS class definition and define the styles that should apply at the specified screen size. For example: 
@import "styles/utils.scss";

.logo {
  height: 30px;
  object-fit: contain;
  margin-bottom: 40px;

  @include for-phone-only {
    margin-bottom: 20px;
  }
}