Gladys Luke's Blog

Querying Media Queries

Photo by RetroSupply on Unsplash

Querying Media Queries

Gladys Luke's photo
Gladys Luke
·

4 min read

I often tell my friends that CSS is the kind of friend that wouldn't wish you a happy birthday if you'd forgotten to wish them first. This is because anytime I remember the bug in my code that made me lose sleep, I marvel at how vengeful CSS truly is. Only a semicolon? Really?

The Problem

Well, I started flexing and floating on CSS and was having a good time until I completed my task. It looked so good on my browser. I was proud! I sent the link to my friends to show off but these guys were too lazy to view it on their laptops. Imagine my shock when I saw a screenshot of my project on a mobile phone screen! It was all over the place and I was devastated.

The Solution

The following explores the key steps I took to address my responsiveness challenges.

Step 1: Revise Media Queries

To fully understand my mobile responsiveness challenges, I had to take a closer look at CSS media queries. A Media Query is a CSS technique introduced in CSS3. It uses the @media rule to include a block of CSS properties only if a certain condition is true. Media queries are essential for creating responsive website designs (RWD) where specific styles are applied to small screens, large screens, and anywhere in between. The media query syntax allows for the creation of rules that can be applied depending on device characteristics.

Media queries can be used to check many things, such as:

  • Width and height of the viewport.
  • Width and height of the device.
  • Orientation (is the tablet/phone in landscape or portrait mode?).
  • Resolution.

Using media queries is a popular technique for delivering a tailored style sheet to desktops, laptops, tablets, and mobile phones (such as iPhone and Android phones).

@media (query) {/* CSS Rules used when query matches */}

Let's have a look at device-specific queries:

For Mobile View:

@media only screen   
and (min-device-width : 360px)   
and (max-device-width : 640px) 
/*STYLES GO HERE*/

For Laptop view:

/* For 1024 Resolution */  
@media only screen   
and (min-device-width : 768px)   
and (max-device-width : 1024px)  
{ /* STYLES GO HERE */}

For Desktop View:

@media only screen   
and (min-width: 1370px)  
and (max-width: 1605px)  
{ /* STYLES GO HERE */}

For Ipad View:

/* Orientation : Landscape */  
@media only screen   
and (orientation : landscape)   
and (-webkit-min-device-pixel-ratio: 1)  
and (min-device-width : 768px)   
and (max-device-width : 1007px)   
{ /* STYLES GO HERE */}

Step 2: Uncover the Cause of the Problem

Apparently CSS is also jealous. You have to tweak it every time you need to present it on a new screen size. So, I started tweaking it with media queries so it could look great on not only my friends' mobile phones but on every other screen size my task may be viewed on.

Step 3: Create Practice Project

And boy was it hard! I've had coding challenges in the past but this was by far the most challenging. I started watching relevant tutorials on YouTube and coding along with them. However, I quickly realized that I had to make further tweaks as the tutorial's project was very different from mine. After hours of going back and forth with my task without significant progress, I created a completely different mock task dedicated to helping me learn media queries.

Step 4: Implementation

And soon, I started getting the hang of things. I could specify how I wanted a particular section of my project to look on any screen size by calling the section inside the @media rule and giving it my preferred CSS properties.

I returned to my original task, feeling sleep deprived and exhausted. However, I wasn't going to stop, not now when I could finally fix things for good. The CSS class for an element called img-box2 was:

.img-box2{
    display: flex;
    padding-left: 140px;
    gap: 20px;
    }
}

But this was the code originally used for the desktop view. I wanted it to look different and better on screens that were 600px in size or lower which includes mobile phones.

To get started, I wrote the @media rule, specifying that I'd want whatever goes in it to affect screen sizes that were 600px in size or lower. Then, I called the img-box2 class and gave it the appropriate CSS properties. 

@media only screen and (max-width: 600px) {
.img-box2{
        height: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
}}

I did nearly the same thing for all my divs, IDs, classes, the navbar, footer, etc. I modified them with new widths, displays, and whatnot to make sure they fit perfectly into both smaller and bigger screens.

I understand that the best practice is to make my projects mobile first but in this case, I'd already made this one desktop first and couldn't delete everything and start over. With deadlines looming, this wasn’t even an option.

You can rest assured that I’ve learned my lessons going forward! I'd be working on my newer projects with this in mind. In the meantime, please check out my task on any screen size and share your thoughts.

For more resources, check w3schools.com/css/css3_mediaqueries.asp and c-sharpcorner.com/UploadFile/44b888/media-q..

media queriesCSSCSS3