CSS Queries: The Ultimate Guide To Make a Blog Responsive

So here I am with a complete guide that will let you know how you can turn your Blog responsive without hiring anyone to get this thing done for you.

As you already know, being a blogger you not only have to keep creating quality content, but to beat your competitors you need to take lead in every single thing. And making your blog responsive is one of them.

Nowadays, don't know how many people are surfing on Iphone, android smartphones, Ipads and most likely fablets. These devices need special adjustments to display our blogs properly (without scrolling left or right).

These adjustment can be done by using CSS, or more specifically by using CSS Queries. These Queries were introduced in CSS 3, with a bunch of other features that we're not going to discuss right now.

So talking about he CSS Queries, the simplest definition I can give you is: These provide different layouts for different resolutions. All you need to do is to add some extra CSS code snippets in your blogs template.

I don't really want to give you a lecture on: Why is it important to make your blog responsive? because you probably know all that stuff, and that is why, you are here with me in this post. So I'll skip this part.

Before I tell you about CSS Media Queries and how you can make your blog responsive you need to read about what you already should know about CSS.

Who's this tutorial for?

OK, did I told you that these queries are the advanced part of CSS and it will require you to have basic knowledge of not only CSS but HTML.

If you're not familiar with any of these then I recommend you tp spend some time learning them as you won't be able to understand these queries without a basic understanding of CSS and HTML.

If you don't know where you can learn all of these and lots more, then don't worry I have previously written an article about some great websites that provide coding tutorials online for free.

Why not give a code for beginners as I always do? The problem is that this time it won't work... Why?

I'll let you know. The thing is that every web page ain't got the same HTML structure except the main tags like: HTML, header and body tags. A blog can't be made responsive with only these tags. You need more insights about the structure that differs in every web page.

So if I provide a code that makes my blog responsive there are 100% chances that it won't work for you, because you need to study the HTML structure well, before making it responsive.

So make sure you're good at playing with code snippets!

Browsers Supporting Media Queries:

As the demand of responsive layouts is increasing day by day. All the latest browsers support the Media Queries to keep themselves in the competition. CSS queries are supported by Internet Explorer 9 and later versions, Opera 7 and later version, Safari 3 and later versions, Firefox 3.5 and later versions and Chrome 4.0 and later versions.

Learning The Media Queries:

So basically the media queries are used for different things including the customization of printed text. But we're only going to discuss the one that will help us accomplish our goal.

So the feature we're interested in is: @Media Screen

@Media Screen :

This is the feature in the media queries that specifies different styles and layout for different resolutions. Media Screen simply means that it targets computers, smartphones, tablet, fablets and more.

How to add media Queries in your stylesheet:

OK, so as you already would have known that there are two ways to add CSS code into your stylesheet,

1. External stylesheet:

External stylesheets are used to use CSS code that is not stored in the file itself, but can be accessed from another source. To do so, you need to point a link to where the CSS code is located, the syntax is as follows.

2.Internal Styelsheet:

Internal stylesheet is the CSS code stored in the file itself. The syntax to use Media Queries in your stylesheet is as follow:

@media screen {

body {

width: 100%;

}

The difference between using these queries and any other CSS feature is that these queries have just a bit different syntax than the normal code., i.e: You've got to use brackets at least four times in your media queries. The first and last bracket in the code I have provided above, tells the browser that a CSS query has started, and where the query ends, the second and the third bracket that I'v highlighted with pink tells the browser to stretch the width of the body to 100 percent.

Important note: Since you're learning to place the CSS queries in your stylesheet than please remember one thing; always place the CSS queries at the end of your stylesheet. The reason why it's important is that if you place these queries in the start and there is some code deep in your stylesheet about some element that you just made responsive by using CSS queries.

Then the browser will use the styles that are present deep in the stylesheet, ignoring what you mentioned in the CSS queries. So always place your queries in the end of your stylesheet to avoid unwanted problems.

How to Target Exact Devices with Media Queries:

So here comes the part where you can target specific devices like Ipads, Iphones, smartphone, fablets and more. Here's how you create a style funnel for different devices.

1.Max-width and Min-width:

Probably, after having a first glance at these, you should have guessed their purpose. These simply command the browser that don't apply the layout unless the browser window is smaller or wider than the specified value. Here is an example:

@media screen and (max-width: 620px) and (min-width: 320px)
{
body {width: 100%;}
}

In this example, the queries force the browser to stretch the width of body to 100%, if the browser window is less than 621px and wider than 319px.

2.Max-height and Min-height:

These command the browser to choose and apply the given layout, if the height of the browser window meets the values that are specified.

3.Device-width and Device-height:

Unlike the previous 2, these target the width and height of the device not the browser. Remember, that a browser window can be small than the whole screen. Here is a example:

@media screen and (device-width: 620px) and (device-height: 320px)
{
body {width: 100%;}
}

4.Orientation:

This feature guides the browser to display different layouts and styles when the device is in landscape mode or in portrait mode. Lets use the Ipad in this example. The width of Ipad is 768px so we're going to target the orientation with a max-width value of 768px. First of all, let me give you example of the Portrait orientation of the Ipad.

Orientation: Portrait

Image by: Elmastudio

To target this orientation, the below code can be used.

@media screen and (max-width:768px) and (orientation: portrait) {
{
the styles goes here
}
}

Orientation: Landscape

Here is an example of the Landscape orientation of the Ipad.

Image by: geo dee

To target this orientation the below code could be used

@media scree and (max-width: 768px) and (orientation: landscape) {
selectors {values and features are placed here}
}

In case you didn't noticed that I used the max-width feature in both the examples. The reason why it is important to use is that it gives the browser an idea that these styles are meant to be used for Ipad, as its width is 768 PX. Other than that, this orientation feature can be used with any device including fablet, smartphones, tablets and every new expected arrival in the market But just remember to target the right device, you need to know its exact width. I'll be providing a list of exact widths for different devices deep in the post. So you can scroll down if you're in a hurry to fetch those values.

Logical Operators in Media Queries:

Logical operators in Media Queries are used to add an extension of properties in a given CSS Query or to combine different queries.

1.Logical Operator "and":

The "and" operator is used to guide the browser that only apply this style sheet to the devices which has both the feature 1 and 2. Here is an example:

@media screen (min-width: 320px) and (orientation: portrait) {
body{
styles goes here
}
}

In this example the feature 1 is min-width that is set to 320px, and the second feature the device should have is orientation: portrait. Which means that this style will only be applicable to a screen whose min-width is at least 320px and is in portrait mode.

2. Logical Operator "or' or "comma':

The "or" and "comma" operator could be used to attach two media queries in a comma separated list. Each comma separated media query in the list is treated as an individual query and any operator used in any of the media queries does not effects the other query. Thus, if any of the queries return true the styles will be applied to the mentioned device. Here is an example of how you can use this operator.

@media screen (max-width: 320px), @media tv and (max-width: 1500px) {
body {
styles are placed here
}
}

In the above list we have attached two queries with the help of "comma" operator (you can use "or" too). The first query will return true if the device has got a max-width of 320px, and the styles will be applied even if the second query doesn't returns too. And same goes with the second query. If the webpage is viewed on a T.V then the styles specified in the query are applied even if the first query isn't true.

3. Logical Operator "only":

The "only" operator could be used to make older browsers neglect the media queries. When you insert the operator "only", then the older browsers (that don't support media queries) simply ignore the media queries, while the versions that support media queries take no effect of it. Here is an example

@media only screen and (max-width: 620px) {
body {
styles are placed here
}
}

The Viewport problem:

Unfortunately most of the smart phones including Iphone, Andriod and Windows 7, set default width to a default viewport which is around 1000 pixels. Iphone and Windows 7 phones have different values for that. These devices normally show the desktop version of the responsive blogs or websites, ignoring what styles you mentioned for that device in the media queries. Luckily, there was a cure to this nightmare of web-designers. It was the viewport meta-tag.

<meta name="viewport" content="width=device-width, initial-scale=1">

What this tag does is that it instructs the browser to set its viewport from its default value to the physical width of the device. Just paste the above tag after the <head> tag of your template and you'll be free from this problem.

Widths of some most commonly used devices:

So here are the values that you're going to need while making your blog responsive. I have mentioned some really widely used devices in the list. If you think something can be added in the list below then you can make your contribution by mentioning it in the comments.

/* Smartphones (portrait and landscape) ----------- */

@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}
/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* Styles */
}
/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* Styles */
}
/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}
/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}
/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}
/* Desktops and laptops ----------- */
@media only screen
and (min-width : 1224px) {
/* Styles */
}
/* Large screens ----------- */
@media only screen
and (min-width : 1824px) {
/* Styles */
}
/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}

code credits: css-tricks

Putting the knowledge in action

The only thing remaining now is the part where you can start planning to make your blog responsive. Like I said, the first step is studying your blogs HTML structure. Assuming that you have checked that box, lets move towards the next question. So the question that rises is that, should you make your blog responsive for mobile devices or wider displays first? Actually, you can do whatever you want, but my recommendation is to start from the smartphones and then move towards the wider displays.

The normal responsive layout of blogs in a smartphone is one column display. In other words, you will find the blog to be stretching the content and the sidebar to full width of the browser window. And that is how a responsive blog should be coded so that there is no need to scroll the web-page horizontally (which is an agony in mobile browsing.)

If you don't know how you should code your blog for each device. Then I recommend you to give a visit to some of the best responsive blogs in your niche, and observe how the layout adjusts according to the screen for each display. Don't worry you don't need an Iphone, Ipad or anything expensive to test how your or any other blog is performing on those displays. I have listed 2 very simple methods that can be used to test the responsiveness of a blog below.

Recommended post: The Only Method To Get Traffic Social Shares and Exposure

How to Check if a Blog is Responsive?

After doing all the hard work everyone remains curious about how their blogs are performing on different displays. So here is how you solve this problem.

1. Zoom In:

One of the easiest ways to check if a blog or site is responsive is to zoom in. The response of the web-page will tell you about it responsiveness. If the layout doesn't adjusts according to the browser window then it means that your blog isn't responsive, but if the layout sets itself according to the available space and you don't need to scroll a page horizontally that means that the web-page is responsive. What actually happens is when you zoom in, is that the browser window actually is re-sizing itself according to your zoom commands. Zoom in= Small display and Zoom out= Wider display. The key associated with the zoom feature is usually the Ctrl key while rolling the mouse button forward or backward (in windows). You can also re-size the window to check your blog responsive layout.

2. Am I Responsive?

No, I'm not asking you if my blog is responsive or not. Actually its the name of an online service named Am I Responsive that lets you know if your blog's responsive layout is working on different devices or not. All you have to do is to type in the URL of your blog and it will load your blog on different devices, which includes Laptop, Iphone, Ipad and I guess a Desktop. Below is a screenshot of how the device will display your blog.

Some Tips to save your time:

Making your blog responsive could take hell lot of time. Especially in Blogger where you have to save the template and reload the blog again and again to see the changes. This process really pisses me off. So here is a quick tip about how you can use the browser's built in features for developers to fasten the process.

The feature I'm talking about is the Inspect element feature of the browser. In most browsers you can access this feature by right clicking on the browser window and you will see an option titled Inspect elements.

Let use this blog as an example. Suppose I want to know that how good will my post title look if I make its font-size 30 PX. Now to do that I don't need to Edit my blogs template. I just need to right click on a post title in my blog and a window will appear.

Now if you can see in the style section of the window that the default font-size is 25 PX.

Now I can change the value from 25 PX to 30 PX to see the changes.

And here are the effects of changing the font-size

In this case the font-size 30 PX is looking a bit too much, so I won't go with that value, but what I wanted to tell you was that you can test different values by using the Inspect element feature of your browser without going through the agony of saving you template again and again to test how different values are performing. You can directly save the correct values that work.

Note: the changes made in the Inspect element section of the browser won't have any effect on your blogs template until and unless you edit your template. The changes you have made in the Inspect element window will be reset as soon as you refresh the page. So make sure to edit your template with correct values before considering your blogs layout to be perfect.

Share your views:
So that was all about this post. I have really tried hard to discuss every thing that could have given you trouble while making your blog responsive, but make sure to register your contribution by suggesting me how can I make this guide more effective and useful In the comments below. Is there something I forgot to mention in the guide? Was the structure easy enough to understand the topic?

P.S: I have worked hard to make sure that this guide could prove helpful in my mission of helping my readers. If you think this guide has helped you in any manner then do consider clicking the share button below.

So are you planning to make your blog responsive?

Was the content worth a share?

Posted by Hamza Posted on 08:03 2 Opinions

Categories: Blog-Designing