Curriculum
Course: CSS Advanced
Login

Curriculum

CSS Advanced

CSS Rounded Corners

0/1

CSS Border Images

0/1

CSS Color Keywords

0/1

CSS Text Effects

0/1

CSS 2D Transforms

0/1

CSS 3D Transforms

0/1

CSS Transitions

0/1

CSS Animations

0/1

CSS Tooltip

0/1

CSS Style Images

0/1

CSS Image Reflection

0/1

CSS Masking

0/1

CSS Buttons

0/1

CSS Multiple Columns

0/1

CSS User Interface

0/1

CSS Box Sizing

0/1

CSS Media Queries

0/1
Text lesson

CSS Media Queries – Examples

CSS Media Queries – More Examples

Exploring additional examples of media queries reveals their effectiveness in customizing style sheets for diverse devices.

As a straightforward illustration, we can adjust the background color based on the device being used.

Image

 

Example 

/* Set the background color of body to tan */
body {
  background-color: tan;
}

/* On screens that are 992px or less, set the background color to blue */
@media screen and (max-width: 992px) {
  body {
    background-color: blue;
  
}
}

/* On screens that are 600px or less, set the background color to olive */
@media screen and (max-width: 600px) {
  body {
    background-color: olive;
  
}
}

Media Queries For Menus

In this example, media queries are utilized to develop a responsive navigation menu that adapts its design according to different screen sizes.

Large screens:

IMG_3710

Small screens:

IMG_3713

Example 

/* The navbar container */
.topnav {
  overflow: hidden;
  background-color: #333;
}

/* Navbar links */
.topnav a {
  float: left;
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* On screens that are 600px wide or less, make the menu links stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .topnav a {
    float: none;
    width: 100%;
  
}
}

Media Queries For Columns

A prevalent application of media queries involves crafting adaptable layouts. In this instance, we establish a layout that transitions between configurations featuring four, two, or full-width columns, contingent upon varying screen sizes.

ImageImageImage

 

Example 

/* Create four equal columns that floats next to each other */
.column {
  float: left;
  width: 25%;
}

/* On screens that are 992px wide or less, go from four columns to two columns */
@media screen and (max-width: 992px) {
  .column {
    width: 50%;
  
}
}

/* On screens that are 600px wide or less, make the columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  
}
}

Note: A contemporary approach to constructing column layouts is through CSS Flexbox (see example below). However, this method lacks support in Internet Explorer 10 and earlier versions. For compatibility with IE6-10, the usage of floats is recommended (as demonstrated above).

For further insights into the Flexible Box Layout Module, consult our CSS Flexbox chapter.

To delve deeper into Responsive Web Design, explore our Responsive Web Design Tutorial.

Example 

/* Container for flexboxes */
.row {
  display: flex;
  flex-wrap: wrap;
}

/* Create four equal columns */
.column {
  flex: 25%;
  padding: 20px;
}

/* On screens that are 992px wide or less, go from four columns to two columns */
@media screen and (max-width: 992px) {
  .column {
    flex: 50%;
  
}
}

/* On screens that are 600px wide or less, make the columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .row {
    flex-direction: column;
  
}
}

Hide Elements With Media Queries

Another prevalent application of media queries involves concealing elements on varying screen sizes.

I will be hidden on small screens.

 

Example 

/* If the screen size is 600px wide or less, hide the element */
@media screen and (max-width: 600px) {
  div.example {
    display: none;
  
}
}

Change Font Size With Media Queries

Media queries can also be employed to adjust the font size of an element across different screen sizes.

Image

 

Example 

/* If screen size is more than 600px wide, set the font-size of <div> to 80px */
@media screen and (min-width: 600px) {
  div.example {
    font-size: 80px;
  
}
}

/* If screen size is 600px wide, or less, set the font-size of <div> to 30px */
@media screen and (max-width: 600px) {
  div.example {
    font-size: 30px;
  
}
}

Flexible Image Gallery

In this instance, media queries are combined with flexbox to craft a responsive image gallery.

 

Example 

Responsive Image Grid

Adjust the size of the browser window to observe the responsive behavior.

Image

Flexible Website

In this illustration, media queries are employed alongside flexbox to design a responsive website featuring a versatile navigation bar and adaptable content layout.

IMG_3714

Orientation: Portrait / Landscape

Media queries can additionally modify the layout of a page based on the orientation of the browser.

You can specify a group of CSS properties that will exclusively take effect when the browser window is wider than its height, denoted as “landscape” orientation.

Example 

Apply a light blue background color when the orientation is in landscape mode.

@media only screen and (orientation: landscape) {
  body {
    background-color: lightblue;
  
}
}

Min Width to Max Width

You can utilize the (max-width: ..) and (min-width: ..) values to establish both a minimum and a maximum width.

For instance, adjust the styling of a <div> element when the browser’s width falls within the range of 600 to 900 pixels.

Example 

@media screen and (max-width: 900px) and (min-width: 600px) {
  div.example {
    font-size: 50px;
    padding: 50px;
    border: 8px solid black;
    background: yellow;
  
}
}

Incorporating an additional value: In the following example, we introduce an extra media query to our existing one by employing a comma.

 

Example 

/* When the width is between 600px and 900px or above 1100px – change the appearance of <div> */
@media screen and (max-width: 900px) and (min-width: 600px), (min-width: 1100px) {
  div.example {
    font-size: 50px;
    padding: 50px;
    border: 8px solid black;
    background: yellow;
  
}
}

CSS @media Reference

For a comprehensive understanding of all media types and features/expressions, please refer to the @media rule in our CSS reference.

Tip: To delve deeper into responsive web design—targeting various devices and screens, employing media query breakpoints—explore our Responsive Web Design Tutorial.