Media queries for portal CSS - Rishan Solutions

Media queries are essential in responsive web design, especially for portal-based websites that need to adapt to various screen sizes such as mobile, tablet, and desktop. Media queries allow you to apply specific styles depending on the device’s characteristics, such as its width, height, orientation, or resolution.

In this guide, we’ll explore how to use media queries effectively in portal CSS to create responsive designs. We will cover various breakpoints, structure examples, and some best practices to ensure the portal remains user-friendly across all devices.

Step 1: Understanding Media Queries

A media query is a conditional statement that applies styles only if certain conditions are met. These conditions are usually based on the viewport size (width/height) or other device characteristics (such as screen resolution or orientation).

Here’s the basic syntax of a media query:

@media (condition) {
  /* CSS rules */
}

You can use multiple conditions such as width, height, and orientation to target specific devices.

Step 2: Defining Breakpoints

Breakpoints are specific widths at which the layout of your page should change to suit different devices. Common breakpoints used in responsive web design include:

Mobile: max-width: 576px
Tablet: max-width: 768px
Desktop (small): max-width: 992px
Desktop (large): max-width: 1200px

These breakpoints can be customized based on your portal’s design and the devices your users are likely to use.

Example of Breakpoints

/* Mobile-first design */
@media (max-width: 576px) {
  /* Styles for mobile devices */
  .header {
    font-size: 18px;
    text-align: center;
  }
  .nav {
    display: block;
    padding: 10px;
  }
}

/* Tablet */
@media (max-width: 768px) {
  /* Styles for tablets */
  .header {
    font-size: 22px;
    text-align: left;
  }
  .nav {
    display: flex;
    justify-content: space-around;
  }
}

/* Small desktop */
@media (max-width: 992px) {
  /* Styles for small desktops */
  .header {
    font-size: 24px;
  }
  .nav {
    display: flex;
    justify-content: space-between;
  }
}

/* Large desktop */
@media (max-width: 1200px) {
  /* Styles for large desktops */
  .header {
    font-size: 28px;
  }
  .nav {
    display: flex;
    justify-content: space-evenly;
  }
}

In this example:

For mobile screens, the header font size is smaller, and the navigation is displayed as a block (stacked vertically).
On tablets, the header font size increases, and the navigation is laid out horizontally with spacing between items.
On small and large desktops, the header and navigation layout changes to better utilize the available screen width.

Step 3: Using Media Queries for Portal Layout

The portal layout, including elements like headers, footers, sidebars, and main content, should be flexible enough to adapt to different screen sizes.

3.1. Example of a Responsive Portal Layout

Let’s design a portal layout where:

The header spans the full width.
The main content has two columns on larger screens (desktop and above) and stacks vertically on smaller screens (tablet and below).
The sidebar only appears on medium and large screens.

/* Base styles for all screen sizes */
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

header {
  background-color: #333;
  color: white;
  padding: 10px 0;
  text-align: center;
}

main {
  display: flex;
  flex-direction: column;
  padding: 20px;
}

/* Main content styles */
.content {
  flex: 1;
  padding: 20px;
  background-color: #f9f9f9;
}

.sidebar {
  display: none;
  background-color: #f1f1f1;
  padding: 20px;
  margin-left: 20px;
}

/* Mobile screens */
@media (max-width: 576px) {
  .content {
    margin-bottom: 20px;
  }
  .sidebar {
    display: none; /* Sidebar is hidden on mobile */
  }
}

/* Tablet screens */
@media (max-width: 768px) {
  main {
    flex-direction: column;
  }
  .sidebar {
    display: none; /* Sidebar is hidden on tablets */
  }
}

/* Small and large desktops */
@media (min-width: 768px) {
  main {
    flex-direction: row; /* Layout switches to row for desktops */
  }
  .sidebar {
    display: block; /* Sidebar appears */
    width: 250px;
    margin-left: 20px;
  }
}

In this example:

On mobile devices, the content stacks vertically, and the sidebar is hidden.
On tablet devices, the sidebar remains hidden.
On desktops and larger devices, the content and sidebar appear side by side, with the sidebar taking up a fixed width.

Step 4: Advanced Media Queries for Specific Features

You can also target specific features like the orientation of the device (portrait or landscape), or the screen resolution for high-DPI (dots per inch) displays such as Retina screens.

4.1. Example of Orientation-Based Queries

/* Styles for portrait mode */
@media (orientation: portrait) {
  body {
    background-color: lightgray;
  }
}

/* Styles for landscape mode */
@media (orientation: landscape) {
  body {
    background-color: darkgray;
  }
}

Here, the background color changes depending on whether the device is in portrait or landscape orientation.

4.2. Example of High-Resolution Displays (Retina)

/* Retina screens (high DPI) */
@media only screen and (min-resolution: 192dpi) {
  img {
    max-width: 100%;
    height: auto;
  }
}

This CSS targets high-DPI displays, which are common in Retina screens and other high-resolution devices, ensuring that images appear sharper.

Step 5: Best Practices for Media Queries

Mobile-First Approach: Start by designing for the smallest screen size and then use media queries to adjust the layout as the screen size increases. This ensures better performance and user experience on mobile devices.
Avoid Overcomplicating Queries: Keep media queries as simple as possible. Use the main breakpoints that cover the majority of devices (mobile, tablet, desktop), and avoid overfitting for specific screen sizes unless absolutely necessary.
Use REM/EM Units for Flexibility: When setting widths, font sizes, and other measurements, prefer rem or em units over fixed pixel sizes. This ensures better scalability and readability, especially on high-DPI devices.
Combine with CSS Grid/Flexbox: Leverage CSS Grid and Flexbox along with media queries for more complex, flexible layouts that adapt better across screen sizes.

Step 6: Testing

Once you’ve added media queries, make sure to test your portal on different screen sizes:

Use browser developer tools to simulate various screen sizes and orientations.
Test on real devices whenever possible to ensure the layout works across all target devices.