9 Valuable CSS Tricks for Responsive Design

CSS also known as Cascading Style Sheets is now an integral part of web development as it allows developers to alter the elements in any web page, which were once impossible. If you know the correct source codes, you can easily make changes in text spacing, underline links and a lot of other stuff, which was non-changeable earlier. Also, responsive designing is getting popular with every passing day thanks to the ever growing popularity of mobile browsing. Today, in this article we will be discussing some of the most valuable CSS tricks that surely plays a significant part in the development and designing of responsive designs. As a developer, you must know that designing a responsive website is not difficult but maintaining it is definitely not an easy task. Developers must know the art of maintaining a balance in the layout of website and make sure that none of the elements or links are broken.

Let us take a look at few of the most useful, valuable and simple CSS rules playing an important role in responsive designing.

1. Elimination of ‘Underline’:

It was very evident when CSS arrive in the world of web development because people witnessed a major change. All the text links were no longer underlined. If you have been browsing the websites ever since the inception of web world, you might remember websites having text links underlined just to highlight them. However, now, thanks to CSS coding, underlining of text links can be removed with very simple coding.

Below is the simple code to remove the underline:

1
2
3
4
5
<style type=”text/css”>
a {
text-decoration:none;
}
</style>

As soon as you apply this code, underlines will be removed from all the text links. As far as my personal opinion is concerned, I personally find non-underlined text links looking a lot better. However, it is a personal choice but as per latest trend and the demands of responsive designing, underlined text links are supposed to be avoided.

2. Responsive Video:

In order to embed the video and along with that inflate full width to the boundary, we have a very useful CSS trick for all developers. Before I go any further, I would like to give credit to tjkdesign.com for introducing this CSS trick and helped a lot of developers in embedding the responsive video. (DEMO)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.video {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
}

.video iframe,
.video object,
.video embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

3. Rollover Text Links:

Rollover text links have gained a lot of popularity in recent times especially after the growing usage of mobile browsing. Creating a rollover effect is not at all difficult and it, too, requires a short and simple code. This code will not only bless your links with a total makeover, but will also make your link change the color on rolling the mouse over.

1
2
3
4
5
<style type="text/css">
a:hover{
color:red;
}
</style>

Just for further information, the code mentioned for eliminating underlines and the code mentioned above needs to be entered in the header area. For selecting a color of your own choice, you can simply remove ‘red’ and enter a color of your own choice.

4. Minimum and Maximum Width:

Max width property helps the developer in setting a boundary line of any element or text. The max-width’s basic purpose is to wrap your element within the boundary line. Following is the code that you use for restricting max-width. You can change the size according to your own requirements.

1
2
3
4
5
.container {

width: 800px;
max-width: 90%;
}

-    Restricting Responsive Images:

Following code will help you in auto adjusting the size of the image for boundary lines. All you need to do is use max-width and 100% and height should be selected as auto.

1
2
3
4
img {
max-width: 100%;
height: auto;
}

The coding needs to be changed a little bit for IE8 as the code above mentioned is only applicable for Internet Explorer 7 and 9. Code for IE8 is mentioned below:

1
2
3
4
5
@media \0screen {
img {
width: auto; /* for ie 8 */
}
}

-    Min-Width:

Always remember the difference between max-width and min-width. Max-width is to stop any element from exceeding the boundary line and min-width helps in setting the minimum width of any element or text. By applying this CSS code, your website won’t allow scaling down any further after reaching the min-width set by you.

Min-Width

5. CSS Coding for Background Images:

Some developers love to incorporate tables in their background images or block elements. If you are one of them you would be glad to know that CSS has a code for you in order to put a background image for any block element which includes anything that is in a rectangular area. It can be a paragraph or a header. Again, to enter a background image of your choice, all you need to do is enter the code given below:

1
2
<div style="background-image: url(../images/test-background.gif); height: 200px; width: 400px; border: 1px solid black;">Example of a DIV element with a background image:</div>
<div style="background-image: url(../images/test-background.gif);; height: 200px; width: 400px; border: 1px solid black;"> </div>

6. Relative Values:

Relative value is of great importance in responsive web designs. If you want the best results, you should know when to use these values and gain maximum out of it. This will help you in getting a great layout as a result.

Relative Values

-    Relative Font Size:

For font size, all you need to have is relative value i.e., em or percentage [%]. With this you can easily decide what the font size, spacing in the text and line height would be. Just in case you want to make any changes in the things mentioned above, all you need to do is make changes in the parent element.

Relative Font Size

-    Relative Percentage Padding:

By seeing the screenshot, you will understand that it is always better to use the percentage padding in comparison to using a fixed padding. You should always be able to make changes as per your requirements which is why percentage padding is the most useful.

Relative Percentage Padding

7. Fancy Borders:

Another great CSS trick is that it helps you in fancying the borders in no time. If you want to highlight the border, just use the code mentioned below:

1
border-bottom: 2px solid #427AA8;

You can obviously change the values as per your requirements.

8. Word Break:

CSS tricks also include wrapping a text so that it does not appear in a single line because apparently, it is not very pleasing to the eye. Following code can help you in wrapping text.

1
2
3
.break-word {
word-wrap:break-word;
}
word-break

9. The CSS Overflow:hidden Property Trick

The opposite of the default visible is hidden. This literally hides any content that extends beyond the box.

css-overflow-hidden

Conclusion

There you go with the most valuable CSS tricks for responsive web design. These tricks can really help you a lot in making changes into your website. Thanks to CSS, you do not have to stick with the things you have developed in the first place. You can always make changes by simple coding.


About the author

With a passion for Knowledge, Smashinghub has been created to explore things like Free Resources For Designers, Photographers, Web Developers and Inspiration.

Twitter Visit author website

Subscribe to Smashing Hub


8 Comments

  1. Javier says:

    Nice comments, but I would say that non underlining is a nice design idea, but a horrible user oriented idea, as most users will spent most of time clicking on every word looking the links!!!

  2. Roman says:

    Found some intresting tips, thanks.
    You know in Russia we always have our text links underlined. I see no reason to get rid of underline decoration.

  3. John says:

    Nice write-up, but be aware that some of the “min-***” and “max-***” height and width statements don’t work in older IE version.

  4. Thanks for all this coding here, its a worthy post while having such information!

  5. Jesse Kernaghan says:

    A great list! Another that I would add that’s been a pretty big lifesaver for responsive layouts is the CSS ‘box-sizing: border-box;’

    CSS Tricks has a great article on it:

    http://css-tricks.com/box-sizing/

  6. Monoo says:

    Really great, enjoyed reading, overflow and relative properties are very usefull in designing a wp template.

  7. Crayons says:

    Very nice tips here! RWD is moving along really fast, but I wish there was a better way to do images responsive!

  8. Mahesh Verma says:

    Really Nice information And tips about CSS Thnaks For sharing this post :)