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

130 Comments

1 4 5 6
  1. Weight Lifting Complete
    Nov 26, 2012 @ 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.

    Reply

  2. Ricardo
    Nov 27, 2012 @ 6:47 am

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

    Reply

  3. Nick
    Dec 3, 2012 @ 10:45 am

    Very useful tutorials. Thanks for sharing!

    Reply

  4. Neha Khanna
    Dec 4, 2012 @ 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.

    Reply

  5. Viron Media
    Dec 5, 2012 @ 11:48 am

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

    Reply

  6. Brandon
    Jan 14, 2013 @ 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.

    Reply

  7. Richard
    Jan 25, 2013 @ 4:33 am

    Great Post! Thanks for sharing..

    Reply

  8. Erick
    Jun 4, 2013 @ 2:03 pm

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

    Reply

  9. Sepatu Murah
    Jun 5, 2013 @ 2:00 am

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

    Reply

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

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

    Reply

  11. Saikumar
    Nov 20, 2016 @ 10:47 am

    Great post

    Reply

  12. Hans andersen
    Dec 13, 2016 @ 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 :-)

    Reply

  13. Hans andersen
    Dec 13, 2016 @ 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.

    Reply

    • Vail Joy
      Dec 13, 2016 @ 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.
      .

      Reply

  14. AngularJS Training
    Jan 9, 2017 @ 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

    Reply

  15. Varun Kulkarni
    Feb 7, 2017 @ 7:26 am

    Superb….Helped alot. Thank you.

    Reply

1 4 5 6

Leave a Reply to Varun Kulkarni Cancel