Menu

Contact Us Today for a Free Quote.

Full Name

Email Address

Phone

Choose all that apply. CNTRL - Click

Monthly Website Production Volume

Message / Project Notes

Captcha Type what you see below.

captcha

 
 
Home » Web Development » Responsive » 11 Useful CSS Code Snippets for Responsive Web Design

11 Useful CSS Code Snippets for Responsive Web Design

11 USEFUL CSS CODE SNIPPETS FOR RESPONSIVE WEB DESIGN

Mobile responsive web designs have become extremely popular in the last 2 years, and with a very good reason. As such it’s common to see more code snippets published on the blogosphere, Github repositories, Codepen docs and more.

You’ve probably heard about responsive web design these last 2 years, but in a nutshell, it all boils down to this:

A responsive website means quite literally that it responds properly to all devices and screen sizes. It is done by scaling down or re-organizing content on the page using some CSS and HTML trickery, in order to create the best possible user experience on your site.

In this article I would like to share some of the ‘life changing’ CSS code snippets I use on a daily bases, so let’s quit the BS and start hitting the road, Jack!

HTML Meta Tags for Responsive Layouts

The meta viewport tag is the only one which should be required for responsive layouts. This will set the view on all screens at a 1×1 aspect ratio. This will remove the default functionality from smartphone browsers which render websites at full-view and allow users to zoom into the layout by pinching. The other two tags are supported in Mobile IE and older smartphone browsers, but aren’t necessary for mobile effects in your layout.

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="HandheldFriendly" content="true">

Media Queries

CSS3 supports all of the same media types as CSS 2.1, such as screenprint and handheld, but has added dozens of new media features, including max-widthdevice-widthorientation and color. One can create multiple style sheets, as well as basic layout alterations defined to fit ranges of widths — even for landscape vs. portrait orientations.

Multiple media queries can also be dropped right into a single style sheet, which is the most efficient option when used:

/* 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 */
}

Max and min width

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. Min-width is opposite to max-width – it sets the minimum width of an element where the element will never be smaller than the provided value (Max- and min- properties can be applies to height as well).

There will be a conflict between max-width and width properties. To ensure that the width will not override and take over write them in the order provided in the following example:

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

Flexible Images and Media

Another aspect of responsive Web design is flexible images and media. Scaling in CSS is pretty simple to implement for images. You can set the media element’s max-width to 100 percent, and the browser will make the image shrink and expand depending on its container. You should supply the image in the best quality and size possible and then let CSS adapt the image to the right size.

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

Note: max-width is not supported in IE8 and lower, but a good use of width: 100% would solve the problem neatly in an IE-specific style sheet. One more issue is that when an image is resized too small in some older browsers in Windows, the rendering isn’t as clear as it ought to be.

Getting typography to scale

Type scales nearly endlessly and reflows into any sized container we give it. Ideally, when our overall layouts scale, so should your type, and here’s a quick and simple example how to do it. We’ll look at how to make your fonts fit your layout nicely no matter what the device or screen width happens to be, the same technique can be applied to headings and/or more complex pages.

You can also add breakpoints for your type to control line length, leading and hierarchy, because these are also affected when your container and type sizes change.

body {
   font-size: 100%;
   font-family:Georgia;
}

@media only screen and (max-width: 400px) {
   body { font-size:80%;}
 }

Overflow:hidden

Applying overflow: hidden allows you to clear the float from the previous element and keep the content running within the containers as the containers resize to fit a new screen environment. This trick is extremely useful for one of the common problems we face when coding with float based layouts, when the wrapper container doesn’t expand to the height of the child floating elements.

But overflow: hidden can also be very useful for images in your responsive web design. You can set a maximum height and crop the image. Put your image in a container and set the width of your image to 100%. Then set the max-height of the container to 450px and hide the overlap by setting the overflow to hidden.

.image-wrap {
    max-height: 450px;
    overflow: hidden;
    max-width: 800px;      
}

.image-wrap img {
    width: 100%;
}

@media only screen and (min-width: 1160px) {
    .image-wrap { max-width: 1000px }
}

If you now change the width of the container, you will see that the image adapts the container’s width but does not exceed the max-height (Read more about this technique: Overflow Image with vertical centering for Responsive Web Design).

Automatic line breaks in narrow columns with CSS 3

A problem that has always existed but has become more common lately as more people – thanks to the popularity of responsive web design – make their layouts adapt to narrow viewports, is the lack of automatic hyphenation in web browsers.

As columns of text become narrower, the risk of a single word being longer than the column width increases. When that happens, the text normally extends outside the column. The effect can be anything from just a slight visual glitch to unreadable text. Either way it’s something you don’t want to happen.

Luckily, CSS offers two properties that can help improve the situation: word-wrap and hyphens. By combining these two properties we can avoid text sticking out of their containers in almost all browsers. Just add the following declarations to a rule targeting any problematic elements:

-moz-hyphens:auto;
-ms-hyphens:auto;
-webkit-hyphens:auto;
hyphens:auto;
word-wrap:break-word;

Source

Full-size Background-Images

Since modern designs feature background images a lot, it’s important that they’re properly rendered on different viewing devices as well. To achieve full coverage of the screen by the background image the following CSS code can be used:

html {
    background: url(bg.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

Here ‘cover’ is the keyword from CSS3 specification which commands that background image is scaled proportionally covering the entire browser window.

Responsive Background-Images

A neat trick to make it possible for background-images to ‘fluidly’ resize keeping the same aspect ratio and without leaving space below or chopping off the image. The smart move is to set the height to 0 and work out the height depending on the aspect ratio of the image itself and use padding-bottom to reveal the image instead.

.background {
    display: block;
    height: 0;
    padding-bottom: 80%;
    background: url(images/image.jpg) no-repeat;
    background-size: 100%;
    text-indent: -9999px;
}

The percentage in the padding-bottom is the aspect ratio of your image. Divide the height by the width of the image, then multiply it by 100 and you’ve got your exact percentage. If the image height is bigger then the width you’ll have a percentage >100%!

Note: I’ve done an experiment with this technique and wrote a tutorial about how to serve different responsive (and Retina-friendly) background-images with various media-queries.

Multi-columns

There is a very new set of properties which allow for multicolumn creation within an element. These are new properties so you will need to use prefixes as they do not work in all browsers without them just yet. The properties are self explanatory: column-count is the amount of columns you’d like while column-gap is the size of the gap between the columns. Of course, there are other properties but these two are enough for you to get around.

@media all and (min-width: 900px) {
   #example p  {
  -webkit-column-count: 3;
  -webkit-column-gap: 1%; /* Saf3, Chrome*/
  -moz-column-count: 3;   
  -moz-column-gap: 1%; /* FF3.5+ */
  column-count: 3;        
  column-gap: 1%; /* Opera 11+*/
  }
}

@media all and (max-width: 900px) and (min-width: 600px) {
#example p  {
  -webkit-column-count: 2; /* Saf3, Chrome*/
  -webkit-column-gap: 4%; /* Saf3, Chrome*/
  -moz-column-count: 2; /* FF3.5+ */
  -moz-column-gap: 4%; /* FF3.5+ */
  column-count: 2; /* Opera 11+*/
  column-gap: 4%; /* Opera 11+*/
  }
}

CSS Flexible Box Layout Module

Flexbox is a recommendation in CSS3 that enables designers to control the arrangement of elements on a page with more finesse than contemporary CSS approaches which have become common because we didn’t have a better solution.

A Flexbox layout creates a relationship between its containing element — a <div>, for example — and the items the container encompasses. At its most fundamental, Flexbox arranges items in a line that points in any cardinal direction without changing the HTML. For more (and better) information about CSS3 Flexbox, please read: Using CSS flexible boxes

/* This is only an example how this CSS property can be used in your CSS file */
aside {
background-color: orange;
order: 4;
flex: 1 ;
}
.mainContent {
background-color: white;
order: 3;
flex: 2;
}
.extraDiv {
background-color: pink;
order: 2;
flex: 1;
}

Note: this CSS property has a limited support in modern browsers, so far it only works on Chrome 21+, Firefox (Gecko) 20.0+, Opera (& Opera Mobile) 12.1+, and Blackberry 10+.