Making the design to be responsive is very easy as shown in my Responsive Design in 3 Steps tutorial, but maintaining the elements to look aesthetically balanced on all breakpoint layouts is an art. Today I’m going to share 5 of my commonly used CSS tricks along with sample cases for coding responsive designs. They are simple CSS properties such as min-width, max-width, overflow, and relative value — but these properties play an important part in responsive design.

View Demos

1. Responsive Video (demo)

This responsive video CSS trick was discovered by tjkdesign.com. I’ve blogged about it before, you may read the details here. It makes the video embed to expand fullwidth to the boundary.


.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%;
}

2. Min & Max Width (demo)

Max-width property allows you to set the max width of the element. The purpose of max-width is to prevent the element from extending the boundary.

Max-Width Container

In the example below, I specify the container to display at 800px if possible, but it should not exceed 90% of the boundary width.


.container {
	width: 800px;
	max-width: 90%;
}

Responsive Image

You can make the image auto resize to the max width of the boundary by using max-width:100% and height:auto.


img {
	max-width: 100%;
	height: auto;
}

The above responsive image CSS works on IE7 and IE9, but doesn’t work on IE8. To fix it, add width:auto. You may apply a conditional CSS specifically for IE8 or use the IE hack below:


@media \0screen {
  img { 
  	width: auto; /* for ie 8 */
  }
}

Min-Width

Min-width is opposit to max-width. It sets the minimum width of an element. In the example form below, min-width is used on the input text field to prevent the input from getting very small when scaling down.

min width

3. Relative Values (demo)

In responsive design, knowing when to use relative value can simplify the CSS and maximize the best layout result. Below are some examples.

Relative Margin

Below is an example of a commentlist where relative left margin is used to space out the threaded comments. Instead of using fixed pixel value, I used percentage value to space out the sub-lists. As shown on the left side of the screenshot, the content box in the sub-lists gets very small on mobile resolution if pixel left margin was used.

relative margin

Relative Font Size

With relative value (eg. em or %), the font size, line-height and margin spacing can be inherited. For example, I can change the font size on all descendant elements by simply changing the font-size on the parent element.

relative font size

Relative Padding

The screenshot below shows it is better to use relative percentage padding as opposed to fixed pixel padding. The box on the left shows an unbalanced padding space if pixel padding was used. The box with percentage padding on the right shows that the content area is maximized.

relative padding

4. Overflow:hidden Trick (demo)

As posted in my previous article, you can clear float with the overflow property. This trick is extremely useful. You can clear the float from the previous element and keep the content running within the container by applying overflow:hidden.

overflow: hidden

5. Word-break (demo)

I also talked about the word-wrap property before. You can force unbreaking text (eg. long URL text) to wrap instead of running in a single line.


.break-word {
		word-wrap: break-word;
}
break-word

131 Comments

Talhah
May 16, 2012 at 9:20 am

Nice. Thank you. Will be using this in future projects.

FreeQ
May 18, 2012 at 6:59 pm

Im using this in my project http://adf.ly/4w7eI

Rob
May 16, 2012 at 9:27 am

The responsive image technique is fine for aesthetics but doesn’t take into account page performance, you wouldn’t want to load a full size image and then scale it down with CSS on a 3G connection or something similar as it would bog down page load time.

Nicola
May 16, 2012 at 9:45 am

Your’re right, but there are a bunch of methods that try to sort it out. Take a look at this round up: http://css-tricks.com/on-responsive-images/

k4len
May 16, 2012 at 10:45 am

i kinda think of responsive design as a low level functionality of the site and serving scaled images as another layer, built on top of responsive design. Scaled images without responsive design doesn’t make much sense.

Nick La
May 16, 2012 at 1:26 pm

I should probably edit the heading to “Resizing Image” instead of responsive image.

Will
May 16, 2012 at 9:36 am

Great post!
Im not to sure about the responsive images problem though that you mention.
This is what i use on my images. it keeps them from going wider than their initial size and when the screen size minimizes, they repond perfectly and shrink.
img {
height: auto;
max-height: 100%;
max-width: 100%;
width: auto;
}
(Tested on XP ie7, XP ie8, Win 7 ie8, ie9, and latest firefox, chrome, safari and opera)

I like the overflow: hidden trick – nice one!

Griffin
May 18, 2012 at 5:54 pm

Agreed Will! I use the same technique you posted here, and I’ve never had any problems. Not sure why you’d only want to target ie8 with ‘width: auto;’

k4len
May 16, 2012 at 10:40 am

Love the video tip, will be using this on our site this week. :)

Joseph R. B. Taylor
May 16, 2012 at 10:57 am

Well done! I look forward to playing with these techniques!

Sasa
May 16, 2012 at 11:25 am

Responsive Video, makes my Chrome crash.

Robert Wollmann
May 16, 2012 at 11:29 am

Great article. I will surely be using these techniques in the near future (especially the video technique). Keep up the quality articles.

Kumo
May 16, 2012 at 12:22 pm

I would call this “the ultimate responsive toolbox”! :-)

I already used your responsive video technique on blogs and it has been really useful!
And I didn’t know about the “overflow: hidden” technique, this is brilliant!

Thanks a lot!

Foxinni
May 17, 2012 at 4:55 am

These are very nice. Clears up some basic questions about where to start with responsive design.

Wouter J
May 17, 2012 at 7:34 am

You can make the font-size relative to the browser width/height. This is now available in Chrome Canary but it is very nice.

More information: http://css-tricks.com/viewport-sized-typography/

Maneet Puri
May 17, 2012 at 8:32 am

Great stuff here especially the Video trick you mentioned! Not many realize the importance of CSS that assist your users in getting a pleasant surfing experience. with the tricks mentioned above issues like resizing, panning, and scrolling are long gone! Thanks a lot and keep up the great work!

Techgyo
May 17, 2012 at 12:23 pm

Excellent very essential css tricks, the example images you added makes the post very easy to know how it works.

Reno Computer Repairs and Website Development
May 17, 2012 at 1:45 pm

This is a great article on responsive image techniques! Thanks for sharing!

Andrew
May 17, 2012 at 3:10 pm

Great article, thank you for sharing with us.

Alex Kuznetsof
May 17, 2012 at 3:53 pm

Awesome! Thank you for hard work! Responsive and No Pasaran! :-)

Hassan
May 18, 2012 at 5:23 pm

as a beginner in responsive design i find this very useful
Thank you

FreeQ
May 18, 2012 at 7:00 pm

Im using this in my project. http://adf.ly/4w7eI thanks

Jasmin
May 19, 2012 at 7:34 am

Very useful article. Thanks!

littlesparkvt
May 19, 2012 at 9:44 am

Awesome stuff, will definitely use some of these in my future responsive designs.

Thiet ke logo
May 20, 2012 at 12:05 am

thanks for sharing, this article details, very useful!
Binky

fjpoblam
May 20, 2012 at 9:28 am

I had surely forgotten about word-wrap. ¡Important! (especially with garish Georgia font on one of my client sites for seniors). Lots of long strings in a couple of my (client) sites. Installed yesterday. Thanks.

مرتضی
May 20, 2012 at 10:10 am

hey dude tanx for sharing this

Andy Feliciotti
May 20, 2012 at 12:56 pm

Some nice tips in here, thanks Nick!

Radu
May 20, 2012 at 1:48 pm

Thanks for grouping all these tricks in one post ;)

Vicky Etherington
May 20, 2012 at 4:28 pm

Brilliant tips – thanks so much.

Responsive Design is
May 20, 2012 at 9:07 pm

Great bunch of tips there for everyone. We’ve noticed a lot of people on Stackoverflow are missing the meta viewport tag…

Taufik Nurrohman
May 21, 2012 at 12:03 am

@media screen
Is that a CSS hack? :\

Taufik Nurrohman
May 21, 2012 at 12:05 am

Duh, what hapen with my code: screen

Jelmer
May 24, 2012 at 1:09 am

Sorry, you are indeed correct. There should be a \ 0 there as well

Jelmer
May 24, 2012 at 1:08 am

What you are typing is just a media query. However, in the article @media screen was used as a css hack to target IE8

CUSTOM ICON DESIGN
May 21, 2012 at 12:55 am

yes, it’s very good tips in coding the responsive web design. many thanks Nick.

WPTidBits
May 21, 2012 at 11:37 am

You did it again. This is a very useful post to all those new in responsive design making. I started my responsive theme design because of your posts. Clearly above the notch, you set the best benchmark in creating tutorials for newbies. Thanks!

طراحی سایت
May 21, 2012 at 2:24 pm

Great article:)

Gene Locklin
May 22, 2012 at 10:36 am

word-wrap isn’t a thing any more.
.element { overflow-wrap: break-word; }

From the css3-text-properties page, overflow-wrap:

For legacy reasons, UAs may also accept ‘word-wrap’ as an alternate name for the ‘overflow-wrap’ property. However this syntax non-conforming in author style sheets.

jolyon
Jun 2, 2012 at 11:41 am

@gene – that may be true but even the latest version of Chrome (19) does not support overflow-wrap, along with most legacy browsers.
Use word-wrap for Best Results (backward compatibility.)

Fatih Arcelik Servisi
May 22, 2012 at 8:43 pm

useful tips thanks.
arcelik beyaz esya, arcelik servis, fatih arcelik, arcelik servis fatih.

Empregada Doméstica Sorocaba
May 23, 2012 at 8:33 am

Wow! Every time I came here I learn news great tricks! I have so much to learn yet…lol. Tks Nick!

Keith McKinney
May 23, 2012 at 8:53 am

Some great tips, thanks. I have a feeling some of these will be very useful if I ever get around to designing the responsive wordpress theme I have in mind. Bookmarked for future!

Morne
May 23, 2012 at 5:25 pm

Really useful css tips. I always struggled getting a logo image to be fluid. I think i will get it working now, thanks for your tips.

Web Design Wolverhampton
May 24, 2012 at 3:44 am

Very useful tips, thanks. max-width has proved very useful in the past, especially with a Content Management System website where the customer adds their own images.

Pete
May 24, 2012 at 10:26 am

Awesome article. For those interested in having responsive images or videos take a peek at the Responsive Grid framework we just released. It features a bunch of the things everyone is riffing on above.

Braden
May 24, 2012 at 12:57 pm

This article goes into so much required detail to help in having a responsive design. Incorporating an example of a video was a very good idea. The print-screens and codes are very helpful in explaining the 5 tricks. As stated by other users here, grouping these 5 tricks is awesome, as it caters for all important issues in one article, not having to search bits and pieces from all around the web. I am not much into the coding part of designing themes, but this article has really encouraged me to continue learning about this and experiment in the future. Keep up the fantastic work as your site is really helpful and it deserves all the praise it can get.

Carl-Michael Hughes
May 24, 2012 at 1:02 pm

oh hoh! That word-break solves so many other issues I was having. Thanks!

Waqas Nawaz
May 24, 2012 at 2:40 pm

Awesome work…hope to see more articles related to CSS…

Eric
May 25, 2012 at 6:57 am

Great Post! I’ve encountered some of those issues with CSS and iphones. Thanks!

dready
May 25, 2012 at 1:23 pm

Damn! i’m feeling like a child discovering a tresor right now million Thanks!

Mahesh
May 26, 2012 at 12:13 pm

Recently I have found this website. Greate idea!

Mike
May 27, 2012 at 3:18 pm

Like it too :)

Bee
May 26, 2012 at 12:56 pm

So great! I like this tricks! Thanks :)

Brian Jackson
May 26, 2012 at 7:08 pm

Great tips, definitely bookmarking this.

Rak Minimarket Surabaya
May 27, 2012 at 11:02 pm

Belanja rak surabaya, where place you find what you need for your minimarket

Wei Zhang
May 28, 2012 at 8:22 am

I really love your css tricks

Jonathan Horne
May 31, 2012 at 3:40 am

Great article. Will use some of these tricks with our next client!

LeonNet
Jun 2, 2012 at 2:57 pm

Great article! A good start for my first responsive project, thx for sharing.

web designer
Jun 4, 2012 at 2:51 am

very nice articles, simple to use this tricks

Dheeraj
Jun 4, 2012 at 2:15 pm

can anyone tell me why using -ive sign in CSS considered as bad SEO practices ?

Ranjita
Jun 5, 2012 at 3:11 am

This is really very helpful tricks………

Ranjita
Jun 5, 2012 at 3:13 am

i am using this number 4 trick but this is not helpful in updated version of google chrome above 21

Majalah
Jun 8, 2012 at 8:30 pm

Instead of using mobile plugin, I should re-design my site using responsive css design. Neverthough responsive css before ;) thanks for the tricks

Annamalai
Jun 10, 2012 at 1:39 am

nice post !!!

icemaker
Jun 11, 2012 at 3:45 am

Great post, thanks for sharing these useful tips.

Jim
Jun 11, 2012 at 12:19 pm

this is exactly what I needed!

Sherwin
Jun 12, 2012 at 3:19 am

Thanks for great responsive CSS tricks

Thomas Barrasso
Jun 12, 2012 at 8:17 pm

Thank you so much! I always forget one or two of these and go through such headaches to find a workaround.

hyvaa
Jun 13, 2012 at 1:25 am

Gooood stuff. Thx : )

Anntina
Jun 14, 2012 at 1:01 am

Good CSS Tricks,It’s very helpful for me~

CiNiTriQs
Jun 14, 2012 at 6:12 am

Thank you very much for this article, some neat tricks I didn’t yet know of. (such as the responsive image IE8 hack ;) )

Muchas Gracias

wat
Jun 17, 2012 at 4:10 pm

I’m shaking my penor :3

Aydin
Jun 19, 2012 at 10:30 am

Thanks for these informations.

Tony
Jun 21, 2012 at 12:18 pm

you’re tutorials are fantastic but I can’t help to wonder why no one really explains or shows a demo in using a css background image while using responsive design? At least I haven’t seen any. Basically I’m wondering if the img element was a css image rather than an html element, how would this work with responsive design? For designing purposes I use css backgrounds and wanted a quick insight on how this is done.

Tony
Jun 21, 2012 at 6:18 pm

that was meant for Nick, not you Aydin. sorry.

Creative Engine Room
Jun 22, 2012 at 8:07 am

Great tricks for building responsive websites and a GREAT POST!! Thank you for sharing.

Kenzie
Jun 22, 2012 at 7:21 pm

Shrink, Share & Get Paid!

Post your Links on Facebook, Twitter, Blogs & Websites!

Go To http://netfly.com/?r=1 to get paid for your posted links!

I-Design
Jun 23, 2012 at 10:10 am

Nice responsive tutorial,

Edy Pang
Jun 28, 2012 at 5:45 am

Thanks, this is great information. Enhanching some responsive web projects with such simple css tricks, nice

chandhu
Jun 29, 2012 at 7:30 am

It is excellent.
Thanks, this is great information.

web designing
Jul 2, 2012 at 6:21 am

very nice and advance blog, You blog provide useful tutorial about CSS. thanks for sharing this wonderful tutorial.
Regards,
website designing

Web Developing
Jul 3, 2012 at 10:01 pm

Really fantastic article. You have cover everything with astonish way. What i enjoy most is that with every written part you had a draw for better undertsaning

Shawn Ang
Jul 6, 2012 at 1:45 am

Useful tutorial. Nice job on posting!

saha
Jul 12, 2012 at 1:19 am

Fantastic sharing. Useful tips for every web developer.

Perth website designer
Jul 12, 2012 at 1:35 am

these tricks are really helpfull and i am gonna use these tricks in my work. BTW thanks to webdesignerwall.com for this wonderfull post.

Perth website designer

Agencja reklamy Bielsko
Jul 17, 2012 at 10:39 am

A very useful trick, thank you!

Scott Weiwu
Jul 18, 2012 at 4:17 am

Nice post!
I also think the h tags cause a lot of troubles when dealing with design, so here a trick to fix it:
http://www.thebestdata.com/zoom.aspx?menutype=1&auto=3906&t=CSS-fixed-header-margin-auto

Mark Creeten
Jul 19, 2012 at 3:06 am

Scott, about the link you posted => with a good reset CSS you don’t need to clear margins on a H2 and even write a post about it ;-)

Scott Weiwu
Jul 21, 2012 at 3:42 pm

Mark, Good idea thanks!
What the best way you advice to reset CSS ?

Prasad Sambari
Jul 19, 2012 at 10:59 am

A very useful trick! Thank you very much for this article,

johanso
Jul 19, 2012 at 1:26 pm

excellent. Responsive Web Design, very important

FreshBrand
Jul 23, 2012 at 11:11 pm

Detailed article, I learned new css, lun reading is done.
thank you much!

Shingo Tamura
Jul 24, 2012 at 5:39 am

Very simple yet useful tricks. For those who are interested, check out my tutorial on responsive design http://shingokko.com/blog-entry/responsively-design-a-blog.html

Linesh Jose
Jul 24, 2012 at 4:25 pm

I was searching code for the embed re-sizing. I found it here. thanks dude :)

Corey
Jul 27, 2012 at 1:40 pm

I had no idea about the word-wrap: break-word functionality!!! This saved me some grief, I kept having a bunch of headings that has links in them go off the page in mobile view which was becoming really frustrating and this saved me!

Woot woot for –

.break-word {
word-wrap: break-word;
}

Thanks for this wonderful write up :)

Yates en Ibiza
Jul 30, 2012 at 7:34 am

I found it here. thanks dude :)

Zeidan
Jul 31, 2012 at 5:51 am

Great post ! Not often do you hear that something is supported in IE & not chrome. It’s too bad that there’s no pure CSS solution for this just yet that works in most browsers.

The Content Vendor
Aug 8, 2012 at 3:56 pm

We’ve been in the field for about 3 years now and we cannot imaging webpages without CSS. CSS3 has lots and lots of great options and features to give wonderful look to your website.
Thanks for a great post.

rickymartin
Aug 11, 2012 at 6:39 am

Thanks for spreading the nice information..

jaydip patel
Aug 11, 2012 at 10:58 pm

nice website and thanks for supporting.i can follow this responsive code…

thiet ke logo
Aug 14, 2012 at 3:44 am

I am impressed with this writer’s content. This content is engaging, thought-provoking and motivational. There are many unique ideas shared in this article that I can relate to and understand….

marlon gantalao
Aug 14, 2012 at 5:01 am

I want to know more about the css tricks and the java script. For me to have a honor this opportunity, and makes me complete regarding this information,,For your help I am able to explore the important methods on how does css and java script will improve by applying on this design.

suhail khan
Aug 17, 2012 at 7:14 am

these stuff not enough because i want to know more about the css tricks For your help I am able to explore the important methods on how does css and java script will improve by applying on this design.

seo
Aug 30, 2012 at 2:56 am

as a beginner in responsive design i find this very useful
Thank you

Ali
Sep 5, 2012 at 6:42 pm

Good articles. Thanks.

Watt
Sep 24, 2012 at 8:31 am

Great article.
I will surely be using these techniques in the near future

Christy
Oct 5, 2012 at 9:49 am

Hello, after reading this amazing piece of writing i am also
glad to share my familiarity here with colleagues.

Hal
Oct 5, 2012 at 11:58 am

Good tips. I have a question about the responsive image IE8 hack. width: auto seems to work fine, EXCEPT NOT when the image is inside of a container, such as a div, with an already defined width. I can change the div width to auto and it will work, but it breaks the page layout. How to work around this? I have a layout with css/grids/divs and the div containers need to have defined widths. Any ideas? Thanks.

martin yan
Oct 7, 2012 at 11:40 am

Thanks for sharing tips

koen
Oct 8, 2012 at 11:21 am

Great article. What I am curious about is, the main column on this website seems to have a fixed width, and it moves horizontally when resizing the window. How is this accomplished with a flexible grid?

vishnu
Oct 14, 2012 at 3:22 pm

That was a superb list of things :-) good one!

James
Oct 22, 2012 at 8:23 am

Hey, great little guide. I created a small plugin to help with design/development of responsive sites which may help others: http://www.cleatsandcode.co.uk/2012/10/20/responsive-css-debugging-tool/?wdw

Sreejesh
Nov 21, 2012 at 4:44 pm

How to center an item which is outside the post content.?

Weight Lifting Complete
Nov 26, 2012 at 7:06 pm

I just used your width:auto for IE issues and it worked perfectly. The images were being shrunk horizontally and now they appear normally. Very thankful for this as it would have taken me a long time to figure out. Appreciate your help.

Ricardo
Nov 27, 2012 at 6:47 am

Awesome post! Simple and straight to the point. Thank you!

Nick
Dec 3, 2012 at 10:45 am

Very useful tutorials. Thanks for sharing!

Neha Khanna
Dec 4, 2012 at 12:56 am

Thanks for this post. I was searching for somethingn on responsive video player and found solution here on this post. I will give tkjdesign a try.

Viron Media
Dec 5, 2012 at 11:48 am

Some very useful tips and tricks I was unaware of. Great article, thanks :)

Brandon
Jan 14, 2013 at 1:02 am

I love the responsive css much more than having alternate, mobile themes. Having alternate themes or sites for mobile is a pain. Thanks for these tips.

Richard
Jan 25, 2013 at 4:33 am

Great Post! Thanks for sharing..

Erick
Jun 4, 2013 at 2:03 pm

Muchísimas gracias!!! gran tutorial y fácil de entender

Sepatu Murah
Jun 5, 2013 at 2:00 am

Found it on here. Well thanks for ‘word-wrap: break-word;’. My mobile web will perfect. :)

ralph lauren polo sale
Jun 10, 2013 at 8:03 pm

Hello, just wanted to mention, I enjoyed this post. It was funny. Keep on posting!

Saikumar
Nov 20, 2016 at 10:47 am

Great post

Hans andersen
Dec 13, 2016 at 3:03 am

What a great post. Very clear. I wonder if you could help me out:
I want to be able to fit any-size image within a container in a fully responsive way. My CSS so far:
Container width: 100% and height: 100%. Img CSS: min-width: 300px; object-fit: cover.
This works perfectly on an iphone both in landscape and portrait with any size image. But on Ipad and PC screens, the container height more than doubles and the img vastly overflows.
The issue is seen on my site: http://localnepaltoday.com in widgets eight and nine from the top in the sidebar.
I simply don’t understand how it can work on a mobile but not on bigger screens?
Well, thanks again for your post and just in case you or anybody reading this has a solution – been searching for a fix for quite a while :-)

Hans andersen
Dec 13, 2016 at 3:07 am

I should quickly add:
The CSS also works on Ipad and PC screens but only if the image pixel width is smaller than the width of the sidebar.
If the image pixel width is bigger than the sidebar (bigger than 300px) the image blows out in full pixel size and drags the container with it, it seems.
Thanks a million for any help with this issue.

Vail Joy
Dec 13, 2016 at 7:31 am

Since 2013, CSS has given us a few really cool properties to help with responsive design. One of them is object-fit, which will likely help you out – the real solution is to write @media queries to handle how your site looks and behaves at different screen sizes, which you can learn more about here. WordPress should also be handling your images in a responsive way, so your issue could be with the theme or widget you are using (try the “Image Widget” plugin which will handle your image responsively).
To add some custom CSS with object-fit, you add a class for the image like this:
.textwidget img{width: 100%; -webkit-object-fit: fill;}. Find out more about object-fit here.
.

AngularJS Training
Jan 9, 2017 at 3:07 am

Informative post., been searching for a post which gives useful and unique points reached here, found the exact which I need. Thank You

Varun Kulkarni
Feb 7, 2017 at 7:26 am

Superb….Helped alot. Thank you.

ASH
Nov 12, 2018 at 12:39 am

LOVED IT. NEEDED MORE LIKE THIS. GRT DOING. PLZ SHARE MORE SUCH EASY AND USEFUL TRICKS ABOUT CSS.

Post Comment or Questions

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.