Creating a program schedule using Container Queries

photo of the example of mediahuis schedule

For my school project, I need to design and build a website for Mediahuis for Triple. Our task is to create a brand-new interface for Mediahuis, and my task is to create a complex schedule guide. The guide will display all the programs for today across different radio stations connected to the system.

One challenge I encountered was handling program cards of different durations. Longer programs, spanning several hours, have plenty of space for images and text, but shorter programs (e.g., 30 minutes) don’t have enough room to display all the details.

firstly, I tried solving this with JavaScript, but it added a delay because it had to check all the cards. To improve performance, I found a new feature in CSS called Container Queries, which provide a CSS-based solution for responsive design based on the size of the container and not on screen size like @Media Queries.

What helped me learning Container Queries

I learned how to use Container Queries from several tutorials by Kevin Powell. Here are a few tutorials that helped me:

Here are a few tutorials that has more information about how to use Container queries

How I use this

Now, I'll show you how I've been using Container Queries to make my card system work so it scales down if the program is smaller (e.g., 30 minutes).

In my card normally programs are around 3 hours. This will take up to 450 pixels in the width of the card. But when the program is 2 hours the text or information is to big to show on the card. Thats why I chose to remove the photo because that is the most less important information you need to see. Here you can see an example how I solved this issue;

style.css

css

.card {
  /* Add this to make @Container Queries work */
  container-type: inline-size;
}

picture {
  /* Any other css classes */

  @container (width < 400px) {
    display: none;
  }
}

.content:after {
  /* Any other css classes */

  @container (width < 400px) {
    display: none;
  }
}

It really depends on what you want to use. You can always still use @Media Queries for everything you work. But when working with for example components Container Queries is a really good feature to add into your component without breaking the page.

This post is still being edited