YogeshChauhan . com

Some EASY-to-Understand CSS media query examples

in CSS on June 30, 2019

Demo 1

In this demo we’ll try to change the background color of the body when the user increases or decreases the browser window size.

But let’s just go for some basics which will help you understand the whole concept.

The CSS @media rule is used to apply many different styles for various devices. It is very helpful especially for responsive website development. Just one or two media rules and the website will be displayed in many devices with their appropriate sizes. So whether your users are using laptops, cell phones or tablets or desktops, your website will work and give users best experience for navigation.

Let’s take a look at our first Demo code.

In DEMO 1, I’ve set the background-color property to green. Which will be the default background color. The font color I’ll keep as white but if you want to change that property, you can write down any color name for any size.

Then the CSS media rules I’ve set are max-width to 800px for smaller screens and again max-width to 500px for even smaller screens. That’s all we’re doing in this example. It’ll give you a basic idea of how media rule works in CSS.

You have to use the word @media and then screen for different screens such as computers, laptops, tablets, cell phones etc. And in the end what you’ll do is to set the rule for specific screen size for e.g. screen size of 500px or lower you can write down max-width:500px.

Go ahead type the code in your editor and check the results. Try to adjust the browser window.

Demo 2

In this example I’ll show you how to adjust the menu bar when displaying in small and big screens. Checkout the code below and then I’ll discuss it after the code.

In the code above, I’ve simply created HTML menu bar with 3 links using div element and CSS style as well. With CSS I’ve displayed it as a block floating left. Also when you hover over it, the item will be displayed in different color. So that was basic menu creation.

Then, as I’ve demonstrated in last example, I’ve used max-width:800px with CSS media rule and removed the float property value. And that’s it. So when you decrease the browser window size and reach at 800px, the menu will adjust itself accordingly.

Demo 3

In this example I’ll show you how to adjust columns on different screen sizes. Checkout the code below and then I’ll discuss it after the code.

In the code above, I’ve added 4 same height and width columns with div and divColumn class. With using :after CSS selector I’m adding an empty table and attaching the columns one after another. That is our default settings.

In @media rule I’ve added screen again same as previous examples for different devices. Also, I’ve used max-width property and on 650px and 800px,the browser will adjust the columns width to 100% and 50% size accordingly.

Demo 4

In this example I’ll show you how to hide any element when displaying in small screens. Checkout the code below and then I’ll discuss it after the code.

In the code above, I’ve created a div element with the class name ‘hide’. In CSS style, I’ve added default div properties and in @media rule, I’m just hiding it when the screen size is 800px or less using max-width property.

Demo 5

In this example I’ll show you how to change the size of fonts in any element for different screen sizes. Let’s look at the code first.

I’ve added simple div element in HTML body and then using CSS I’ve set the size and color. Notice that I haven’t specified any font-size in default CSS. For that I’m using media rule. For screen size 800px and above the font-size will be 80px and for 800px and below it’ll be 30px. The element div will adjust itself as well as per the font-size.

Credit goes to w3schools


Most Read

#1 How to check if radio button is checked or not using JavaScript? #2 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #3 How to uninstall Cocoapods from the Mac OS? #4 How to add Read More Read Less Button using JavaScript? #5 How to Use SQL MAX() Function with Dates? #6 PHP Login System using PDO Part 1: Create User Registration Page

Recently Posted

May 7 How to disable right click and drag and drop of images using jQuery? May 7 How to render Lists in React? May 7 What’s the difference between variables in CSS and SCSS (Sass)? May 7 How to define variables in SCSS (Sass)? May 7 How to show and hide an element on click in React? May 5 Use inline if to make a shorter conditional syntax in React

You might also like these

File System Integrity: How to Keep an Eye on Your Files and Folder Change?MiscHow to avoid element shift on border change while hovering in CSS?CSSDid you get an error while displaying Special Characters in JavaScript?JavaScriptJavaScript String fromCharCode() MethodJavaScriptHow to Install PHP composer in Mac OS Catalina?PHPWordPress 5.7 is migrating to latest jQuery version and people are freaking outjQuery