Modifying a Project to Become Responsive With Media Queries
By: Tyler J Funk
Tags: Responsive Design, CSS, Software Development, Web Development, Media Queries

I know, I know, always design for mobile first. I see and hear that a lot, but I didn’t listen and now I want to make my website look good on every screen size. I’ve been developing and styling Funky Cafe entirely based on a full screen rendering of the app, which is a pretty good user experience in full screen on a desktop or laptop. However, when I start reducing the screen size, we can start to see problems arise.

Here is what Funky Cafe would look like if it were opened on a mobile device.

Not too good!

We can see the styling doesn’t change, but that’s the issue. The styling I applied to the desktop version just doesn’t translate as well to smaller screens. I used pixels when designating sizes for different elements, so my elements are naturally way too large for the screen.

So what can we do?

Use a media query breakpoint!

I will be demonstrating how to use media queries by modifying my non responsive app Funky Cafe so it will look good even if it’s opened on a mobile device. This post will be a look into my thought process when trying to translate a desktop web app to mobile browser size (truthfully, it’s mostly CSS tinkering). We’ll get the header and navigation to fit better, and then also address the “Meals” tab shown in the images above.

I read that the most common screen sizes to design for are 320px (mobile), 768px (tablet), and 1200px (laptop). By modifying Funky Cafe for mobile, it will demonstrate the core principles necessary for tablet.

If you would like to see the structure of the app as you read along, here is the Github repository. Let’s do some planning before we get started.

Opening Brainstorming

Here are the things I feel will need to be addressed:

— Everything needs to be resized, the breakpoint (screen width) we’ll use is 320px, so everything needs to fit well within that small space.

— Orientation will need to change for a lot of elements. For example, we’ll move the ingredients list for each meal below the image, and we’ll make all the meals flow into one column instead of two.

I think after modifying the app with these two points in mind, we’ll have a much better looking design for mobile, and we’ll be on our way to making Funky Cafe responsive.

Header

Starting with the very top, we will set our header with a class name of app-header which contains the title, navigation, and reset button to have a max-width: 320px . Then we need to get our title smaller, and make our navigation tabs fit better.

Here’s what the media query itself will look like. We need to put all of our mobile styling inside of it in order for it to only be used when the screen size is 320px or less:

@media only screen and (max-width: 320px) {



}

This allows us to change our styling for small devices, but keep our original styling for our larger devices. Let’s get started by simply making the header fit the screen and see what we get:

@media only screen and (max-width: 320px) {

.app-header {

max-width: 320px;

}

}

We made it change! Now we can see all the elements of the header, they are just incredibly large, and smashed together! Let’s achieve our next goal by modifying the title:

@media only screen and (max-width: 320px) {

.app-header {

max-width: 320px;

} .title, .letter-f-and-c {

font-size: 28px;

}

}

The top section of the header is shaping up after reducing the size of the title.

Let’s talk about something I found to be important with media queries. If you do not put your media query at the bottom of your stylesheet, you will run into a weird issue with setting some properties, for me it was font-size . I went down a rabbit hole where I eventually solved my issue by adding the keyword !important after the value I gave for font-size .

I’ve read that !important is bad practice, I’ve also read it’s not so bad. In the name of not demonstrating bad practice, we won’t use !important . Luckily, I found a comment someone wrote about media queries needing to be at the bottom of stylesheets, once I did that, I didn’t need any magic keywords at all.

Navigation

Moving right along, the next section that looks like it needs help is the navigation bar, so I’ll move to that stylesheet and adjust things by making the text smaller, then reducing the height of each tab, and adding some padding to show a little orange above and below the tabs:

@media only screen and (max-width: 320px) {

.navbar-h1 {

font-size: 16px;

margin: 0px;

} .navbar-li {

height: 50px;

} .navbar-ul {

padding-top: 5px;

padding-bottom: 5px;

}

}

Things are shaping up already! Let’s move on to the lower body section and finish up this demonstration!

Body Section

I think a good first step here would be to make all the meal boxes appear in one column. I will also change the size of the “Pick Your Meals!” text, and reduce the margin between it and the header/navigation. After moving to the correct stylesheet:

@media only screen and (max-width: 320px) {

.meal-boxes-div {

display: flex;

flex-direction: column;

} .meal-page-h1 {

font-size: 24px;

margin: 125px 0px 10px 0px;

//previously 195px 0px 10px 0px;

}

}

This leads us into our final steps, reducing the size of the meal names, preventing ingredients from wrapping, and moving the ingredients list underneath the images:

@media only screen and (max-width: 320px) {

.meal-name-h2 {

font-size: 30px;

} .img-and-ingredients {

flex-direction: column;

margin: 8px 10px 0px 10px;

} .ingredients-ul {

flex-wrap: nowrap;

height: auto; //height changes with amount of ingredients

margin-bottom: 0px;

}

}

That sums up the issues I see with this page! Everything actually fits on the screen properly! Here is a GIF of the finished result in action:

Final Notes

Now, something I want to mention is that I used max-width: 320px for the mobile screen breakpoint, but if I wanted to make a breakpoint for tablets, and I used max-width: 768px , we would see the styling for tablets show up even if the screen size was 300px . Why? Because 300px is not only less than our mobile breakpoint, but now it would also be less than 768px for the tablet breakpoint, so the tablet styling applies.

How to avoid this:

Instead of using max-width in the media query, if we use min-width and set the value to what we want the smallest possible screen to be for that styling version instead of the largest, we can avoid the confusing pitfalls involved with using max-width for every breakpoint.

Example:

@media only screen and (max-width: 320px) {

//styling for small mobile devices (what we just did)

} @media only screen and (min-width: 321px) {

//styling for medium to large mobile devices

} @media only screen and (min-width: 768px) {

//styling for tablets

} @media only screen and (min-width: 1200px) {

//styling for laptops and larger

}

Conclusion

At this point, I think we have sufficiently shown media queries are a simple way to make your web app fit multiple sizes of devices, and maybe it will inspire you to transform your old non-responsive app into something worth opening on a mobile device or tablet.

While I realize a lot of this article is specifically about how to style my app, Funky Cafe, my goal was to provide educational value by explaining my thought process while turning a web app responsive, start to finish.

Hopefully this was insightful, and per usual, happy hacking!