OpenSourceVarsity

pdf icons

Media Queries

Please Click This Link to download all the code spec associated with the above example.

In tutorial 10 we learned how to create a full-fledged, HTML5/CSS3 template that displayed responsive behavior. Unfortunately, while the template definitely behaves responsively, there were a couple of issues that make the website experience less than ideal for its site visitors. In this tutorial let’s address these issues.

Template Issues That Will Be Sorted Out Now

Take a close look at diagram 1. You will notice that there are a few issues with the look and feel of the template.

Notice that the pgContentLeft and pgContentRight content areas are touching each other. i.e. the yellow and pink colored content areas.

Site visitors normally expect some white space between such content areas as can be seen between the page header area in grey and the pgContentLeft area in yellow.

Additionally, the Affiliates advert areas are touching each other.

Similarly the Footer menu links, the Contact form and the Social icon links area are touching each other when the display view port is reduced from desk top / laptop size.

We are going to address these issues using Media Queries specified in template_css.css which is linked to the template, contains all the template styling rules and thus determines the templates look and feel.

What Are Media Queries?

When we talk about Cascading Style Sheets (CSS), we mentally associate its content with the styling of HTML page content in a Browser.

Fortunately CSS is capable of handling much more than just that. Since CSS2 was introduced, we could specify stylesheets for specific media types such as screen or print. Now with Media queries in CSS3, we are able to target specific screen sizes.

Today it is a simple task to have different sets of CSS styling rules for different screen widths in use with various mobile devices, which can have remarkably varying sizes all defined in a single style sheet.

In today’s world, site visitors can view a website’s web pages on a wide range of display screens. These screens can range from the large displays connected to their work stations, smaller displays on their laptops, notebooks, netbooks, even smaller displays associated with their iPad or Android tablets and even the iPhone and various other Android phones, all of which have vastly varying screen size and pixel densities.

Diagram 1 Diagram 1 If as a web site developer, I had to build and maintain multiple versions of each web page to cater to each display screen size, I for one, would definitely have switched careers, specifically give up webpage/website coding.

Thankfully for me CSS3 introduced Media queries and made life for web page / website developers sensible and human once again.

With Media queries, rather than looking at what the device is, we will look at what capabilities the device has.

Specifically, we will look at the following:

  • Height and width of the device
  • Height and width of its browser
  • Screen resolution
  • Orientation of the device (for mobile phones and tablets – portrait or landscape)

Different Styles for Different Screens How it Works

With CSS3 compliant Browsers (almost all modern desktop, laptop, tablet and mobile device Browsers are) what happens is that:

  • Each time the Browser encounters a reduced display size, a specific Media query is fired by the Browser
  • Each time the Browser encounters an increased display size, a specific Media query is fired by the Browser

Hence, the simplest approach to styling web page content for different display sizes is to define a series of standard Media queries right at the bottom of the CSS file linked to the template.

Next write appropriate styling rules within the Media query wrapper bound to the IDs and Classes used to style web page content. When that Media query fires (the Browser handles this automatically), the CSS rules written within the Media query wrapper are instantly applied to all the IDs and Classes of the web page.

Using this approach for example font-family, font-size, font-weight, color and so much more can be set and/or reset in web page content depending upon which Media query was fired by the Browser. Larger font-sizes can be defined for appropriately larger screen sizes, such as work stations, desk tops, laptops and so on, with smaller font-size being defined for the iPad, iPhone, or Android pads or Android phones.

An Example Of Standard Media Queries We Use Today

/******************************  Media Query STARTS *********************************/
/*  Large desktop */
@media (min-width: 1200px)
{
}

/* Tablet - landscape */
@media (max-width: 1024px)
{
}

/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px)
{
}

/* Landscape phones and down */
@media (max-width: 480px)
{
}
@media (max-width: 767px)
{
}

/*  Small mobile phone screens */
@media (max-width: 320px)
{
}

/*  Even smaller mobile phone screens */
@media (max-width: 240px)
{
}
/******************************  Media Query ENDS *********************************/

NOTE: The Media queries specified above are live working examples of Media queries we use regularly.

Place these Media queries right at the bottom of the CSS file linked to the template. Then open up any appropriate Media query that you want to target and just add the CSS rules bound the IDS and Classes used with the template to style page content and you are good to go.

Another Approach To Styling A Template

Linking to Different Stylesheets Using Media Queries

Adding all the style rules in the same CSS file is quite acceptable for smallish website (or training examples) but for a full-fledged website, this could quickly become a pain to manage.

Then use the approach of linking to a different stylesheet for specific screen sizes.

The way to do that is to use the media attribute of the link tag.

<link rel=”stylesheet” type=”text/css” media=”only screen and (max-device-width: 480px)” href=”mobile-device.css” />

Now you can define all the mobile specific styles in the mobile-devices.css file which will get downloaded and accessed only when necessary.

Applying What We’ve Learned To Our Template

The Problem: When we reduce the display size of the Browser to below tablet size, i.e. iPad or 10 or 8 Android tablets the web page content containers stack themselves one on top of the other.

This results in the web page, content containers, touching each other. If the web page, content containers, actually had content within then this would look ugly. The first line of the second content container will almost run into the last line of the content container above.

Hence as the Browser’s width is manually reduced, the Browser will keep firing Media Queries. As of now nothing will happen as none of the Media Queries have any CSS rules loaded in them.

Figuring Out Which Media Query Was Fired By The Browser

NOTE: We use Chrome as our primary test Browser. Regretfully media query information seems to be displayed only in Chrome.

When you want to figure out which Media query was fired by the Browser, shrink the Browser width to a point when the web page, content containers, just stack themselves one on top of the other as shown in diagram 2.

Diagram 2 Diagram 2

Then simply place your mouse cursor on the web page element for which you want to check which Media Query was fired by the Browser.

NOTE: We chose web page element pgContentLeft, colored yellow and bearing the heading, Main Page Content – Left Column, and clicked the right mouse button as shown in diagram 2.

On click of inspect element in the sticky menu the screen as shown in diagram 3 is displayed.

Diagram 3 Diagram 3

As you can see in diagram 3 the Browser has exposed the exact Media query that fired.

NOTE: We use Chrome as our primary test Browser. Regretfully media query information seems to be displayed only in Chrome.

On checking (using inspect element within the Browser) we discovered that exactly when the pgContentLeft and pgContentRight moved one below the other the @media (max-width: 767px){} media query was fired by the Browser.

Hence, we added the styling rules we wanted to that specific Media query in template_css.css.
@media (max-width: 767px)
{
}

Within this Media query we added a CSS rule that placed a 20 pixel margin-bottom to each of the following web page, content containers.

  • #slider
  • #pgContentLeft
  • #footerMenu
  • #contactForm
  • #affiliate1
  • #affiliate2
  • #affiliate3
  • #copyrightAck

As follows:

@media (max-width: 767px)
{
 #slider,
 #pgContentLeft,
 #footerMenu,
 #contactForm,
 #affiliate1,
 #affiliate2,
 #affiliate3,
 #copyrightAck
 {
 margin-bottom:20px;
 }

 #affiliates,
 footer,
 #copyrightAck
 {
 margin-top:20px;
 }
}

Now when the web page, display size was reduced in the Browser all the web page, content containers were nicely separate from one another as shown in diagram 4.

Using this technique, we can decrease font-size, change font-weight, change a font-family or do anything at all we desire with webpage content that can be controlled by CSS styling rules.

This completes our first look at Media Queries written within the CSS file linked to the responsive template.

Diagram 4 Diagram 4

A Quick Re-Cap

What we have learned so far.

What are Media Queries?

How they impact the creation of responsive web pages

Where would Media queries be included in a web page?

Alternative techniques for linking Media queries to a web page

The effect of placing CSS rules within a Media Query wrapper

How to identify which Media query has been fired using inspect element in the Browser

In our next lesson, we are going to flesh out the header section of the HTML5 template with appropriate content such as a Logo, with appropriate Logo text and a proper Bootstrap determined – Top Menu system.

Please Click This Link to download all the code spec associated with the above example.

 

April 5, 2016
Design by Ivan Bayross and Meher Bala © 2017 All Rights Reserved
X