CSS Pagination Examples
❮ Previous Next ❯
Learn how to create a responsive pagination using CSS.

Simple Pagination
If you have a website with lots of pages, you may wish to add some sort of pagination to each page:

«
1
2
3
4
5
6
»
❮ 
  ❯
Example
.pagination {
    display: inline-block;
}

.pagination a {
    color: black;
    float: left;
    padding: 8px 16px;
    text-decoration: none;
}
»
Active and Hoverable Pagination
«
1
2
3
4
5
6
7
»
Highlight the current page with an .active class, and use the :hover selector to change the color of each page link when moving the mouse over them:

Example
.pagination a.active {
    background-color: #4CAF50;
    color: white;
}

.pagination a:hover:not(.active) {background-color: #ddd;}
»
Rounded Active and Hoverable Buttons
«
1
2
3
4
5
6
7
»
Add the border-radius property if you want a rounded “active” and “hover” button:

Example
.pagination a {
    border-radius: 5px;
}

.pagination a.active {
    border-radius: 5px;
}
»
Hoverable Transition Effect
«
1
2
3
4
5
6
7
»
Add the transition property to the page links to create a transition effect on hover:

Example
.pagination a {
    transition: background-color .3s;
}
»
Bordered Pagination
«
1
2
3
4
5
6
7
»
Use the border property to add borders to the pagination:

Example
.pagination a {
    border: 1px solid #ddd; /* Gray */
}
»
Rounded Borders
Tip: Add rounded borders to your first and last link in the pagination:

«
1
2
3
4
5
6
7
»
Example
.pagination a:first-child {
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}

.pagination a:last-child {
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}
»
Space Between Links
Tip: Add the margin property if you do not want to group the page links:

«
1
2
3
4
5
6
7
»
Example
.pagination a {
    margin: 0 4px; /* 0 is for top and bottom. Feel free to change it */
}
»
Pagination Size
«
1
2
3
4
5
6
7
»
Change the size of the pagination with the font-size property:

Example
.pagination a {
    font-size: 22px;
}
»
Centered Pagination
«
1
2
3
4
5
6
7
»
To center the pagination, wrap a container element (like

Toggle navigation
TUTORIAL HOME
CSS3 Multiple Columns
❮ Previous Next ❯
CSS3 Multi-column Layout
The CSS3 multi-column layout allows easy definition of multiple columns of text – just like in newspapers:

Daily Ping
Lorem ipsum
dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.

Browser Support
The numbers in the table specify the first browser version that fully supports the property.

Numbers followed by -webkit- or -moz- specify the first version that worked with a prefix.

Property
column-count 50.0
4.0 -webkit- 10.0 2.0 -moz- 9.0
3.1 -webkit- 37.0
15.0 -webkit-
11.1
column-gap 50.0
4.0 -webkit- 10.0 2.0 -moz- 9.0
3.1 -webkit- 37.0
15.0 -webkit-
11.1
column-rule 50.0
4.0 -webkit- 10.0 2.0 -moz- 9.0
3.1 -webkit- 37.0
15.0 -webkit-
11.1
column-rule-color 50.0
4.0 -webkit- 10.0 2.0 -moz- 9.0
3.1 -webkit- 37.0
15.0 -webkit
11.1
column-rule-style 50.0
4.0 -webkit- 10.0 2.0 -moz- 9.0
3.1 -webkit- 37.0
15.0 -webkit
11.1
column-rule-width 50.0
4.0 -webkit- 10.0 2.0 -moz- 9.0
3.1 -webkit- 37.0
15.0 -webkit
11.1
column-span 50.0
4.0 -webkit- 10.0 Not supported 9.0
3.1 -webkit- 37.0
15.0 -webkit
11.1
column-width 50.0
4.0 -webkit- 10.0 2.0 -moz- 9.0
3.1 -webkit- 37.0
15.0 -webkit
11.1
CSS3 Multi-column Properties
In this chapter you will learn about the following multi-column properties:

column-count
column-gap
column-rule-style
column-rule-width
column-rule-color
column-rule
column-span
column-width
CSS3 Create Multiple Columns
The column-count property specifies the number of columns an element should be divided into.

The following example will divide the text in the

Toggle navigation
TUTORIAL HOME
CSS3 User Interface
❮ Previous Next ❯
CSS3 User Interface
CSS3 has new user interface features such as resizing elements, outlines, and box sizing.

In this chapter you will learn about the following user interface properties:

resize
outline-offset
Browser Support
The numbers in the table specify the first browser version that fully supports the property.

Numbers followed by -webkit- or -moz- specify the first version that worked with a prefix.

Property
resize 4.0 Not supported 5.0
4.0 -moz- 4.0 15.0
outline-offset 4.0 Not supported 5.0
4.0 -moz- 4.0 9.5
CSS3 Resizing
The resize property specifies whether or not an element should be resizable by the user.

This div element is resizable by the user (works in Chrome, Firefox, Safari and Opera).
The following example lets the user resize only the width of a

Toggle navigation
TUTORIAL HOME
CSS3 Box Sizing
❮ Previous Next ❯
CSS3 Box Sizing
The CSS3 box-sizing property allows us to include the padding and border in an element’s total width and height.

Browser Support
The numbers in the table specify the first browser version that fully supports the property.

Numbers followed by -webkit- or -moz- specify the first version that worked with a prefix.

Property
box-sizing 10.0
4.0 -webkit- 8.0 29.0
2.0 -moz- 5.1
3.1 -webkit- 9.5
Without the CSS3 box-sizing Property
By default, the width and height of an element is calculated like this:

width + padding + border = actual width of an element
height + padding + border = actual height of an element

This means: When you set the width/height of an element, the element often appear bigger than you have set (because the element’s border and padding are added to the element’s specified width/height).

The following illustration shows two

CSS3 Flexible Box
❮ Previous Next ❯
CSS3 Flexbox
Flexible boxes, or flexbox, is a new layout mode in CSS3.

Use of flexbox ensures that elements behave predictably when the page layout must accommodate different screen sizes and different display devices.

For many applications, the flexible box model provides an improvement over the block model in that it does not use floats, nor do the flex container’s margins collapse with the margins of its contents.

Browser Support
The numbers in the table specify the first browser version that fully supports the feature.

Numbers followed by -webkit- or -moz- specify the first version that worked with a prefix.

Property
Basic support
(single-line flexbox) 29.0
21.0 -webkit- 11.0 22.0
18.0 -moz- 6.1 -webkit- 12.1 -webkit-
Multi-line flexbox 29.0
21.0 -webkit- 11.0 28.0 6.1 -webkit- 17.0
15.0 -webkit-
12.1
CSS3 Flexbox Concepts
Flexbox consists of flex containers and flex items.

A flex container is declared by setting the display property of an element to either flex (rendered as a block) or inline-flex (rendered as inline).

Inside a flex container there is one or more flex items.

Note: Everything outside a flex container and inside a flex item is rendered as usual. Flexbox defines how flex items are laid out inside a flex container.

Flex items are positioned inside a flex container along a flex line. By default there is only one flex line per flex container.

The following example shows three flex items. They are positioned by default: along the horizontal flex line, from left to right:

Example

.flex-container {
    display: -webkit-flex;
    display: flex;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}

.flex-item {
    background-color: cornflowerblue;
    width: 100px;
    height: 100px;
    margin: 10px;
}

»

It is also possible to change the direction of the flex line.

If we set the direction property to rtl (right-to-left), the text is drawn right to left, and also the flex line changes direction, which will change the page layout:

Example
body {
    direction: rtl;
}

.flex-container {
    display: -webkit-flex;
    display: flex;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}

.flex-item {
    background-color: cornflowerblue;
    width: 100px;
    height: 100px;
    margin: 10px;
}
»

Flex Direction
The flex-direction property specifies the direction of the flexible items inside the flex container. The default value of flex-direction is row (left-to-right, top-to-bottom).

The other values are as follows:

row-reverse – If the writing-mode (direction) is left to right, the flex items will be laid out right to left
column – If the writing system is horizontal, the flex items will be laid out vertically
column-reverse – Same as column, but reversed
The following example shows the result of using the row-reverse value:

Example
.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row-reverse;
    flex-direction: row-reverse;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}
»

The following example shows the result of using the column value:

Example
.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}
»

The following example shows the result of using the column-reverse value:

Example
.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column-reverse;
    flex-direction: column-reverse;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}
»

The justify-content Property
The justify-content property horizontally aligns the flexible container’s items when the items do not use all available space on the main-axis.

The possible values are as follows:

flex-start – Default value. Items are positioned at the beginning of the container
flex-end – Items are positioned at the end of the container
center – Items are positioned at the center of the container
space-between – Items are positioned with space between the lines
space-around – Items are positioned with space before, between, and after the lines
The following example shows the result of using the flex-end value:

Example
.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: flex-end;
    justify-content: flex-end;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}
»

The following example shows the result of using the center value:

Example
.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}
»

The following example shows the result of using the space-between value:

Example
.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}
»

The following example shows the result of using the space-around value:

Example
.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-around;
    justify-content: space-around;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}
»

The align-items Property
The align-items property vertically aligns the flexible container’s items when the items do not use all available space on the cross-axis.

The possible values are as follows:

stretch – Default value. Items are stretched to fit the container
flex-start – Items are positioned at the top of the container
flex-end – Items are positioned at the bottom of the container
center – Items are positioned at the center of the container (vertically)
baseline – Items are positioned at the baseline of the container
The following example shows the result of using the stretch value (this is the default value):

Example
.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: stretch;
    align-items: stretch;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}
»

The following example shows the result of using the flex-start value:

Example
.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: flex-start;
    align-items: flex-start;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}
»

The following example shows the result of using the flex-end value:

Example
.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: flex-end;
    align-items: flex-end;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}
»

The following example shows the result of using the center value:

Example
.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}
»

The following example shows the result of using the baseline value:

Example
.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: baseline;
    align-items: baseline;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}
»

The flex-wrap Property
The flex-wrap property specifies whether the flex items should wrap or not, if there is not enough room for them on one flex line.

The possible values are as follows:

nowrap – Default value. The flexible items will not wrap
wrap – The flexible items will wrap if necessary
wrap-reverse – The flexible items will wrap, if necessary, in reverse order
The following example shows the result of using the nowrap value (this is the default value):

Example
.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: nowrap;
    flex-wrap: nowrap;
    width: 300px;
    height: 250px;
    background-color: lightgrey;
}
»

The following example shows the result of using the wrap value:

Example
.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    width: 300px;
    height: 250px;
    background-color: lightgrey;
}
»

The following example shows the result of using the wrap-reverse value:

Example
.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap-reverse;
    flex-wrap: wrap-reverse;
    width: 300px;
    height: 250px;
    background-color: lightgrey;
}
»

The align-content Property
The align-content property modifies the behavior of the flex-wrap property. It is similar to align-items, but instead of aligning flex items, it aligns flex lines.

The possible values are as follows:

stretch – Default value. Lines stretch to take up the remaining space
flex-start – Lines are packed toward the start of the flex container
flex-end – Lines are packed toward the end of the flex container
center – Lines are packed toward the center of the flex container
space-between – Lines are evenly distributed in the flex container
space-around – Lines are evenly distributed in the flex container, with half-size spaces on either end
The following example shows the result of using the center value:

Example
.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-align-content: center;
    align-content: center;
    width: 300px;
    height: 300px;
    background-color: lightgrey;
}
»

Flex Item Properties
Ordering
The order property specifies the order of a flexible item relative to the rest of the flexible items inside the same container:

Example
.flex-item {
    background-color: cornflowerblue;
    width: 100px;
    height: 100px;
    margin: 10px;
}

.first {
    -webkit-order: -1;
    order: -1;
}
»

Margin
Setting margin: auto; will absorb extra space. It can be used to push flex items into different positions.

In the following example we set margin-right: auto; on the first flex item. This will cause all the extra space to be absorbed to the right of that element:

Example
.flex-item {
    background-color: cornflowerblue;
    width: 75px;
    height: 75px;
    margin: 10px;
}

.flex-item:first-child {
    margin-right: auto;
}
»

Perfect Centering
In the following example we will solve an almost daily problem: perfect centering.

It is very easy with flexbox. Setting margin: auto; will make the item perfectly centered in both axis:

Example
.flex-item {
    background-color: cornflowerblue;
    width: 75px;
    height: 75px;
    margin: auto;
}
»

align-self
The align-self property of flex items overrides the flex container’s align-items property for that item. It has the same possible values as the align-items property.

The following example sets different align-self values to each flex item:

Example
.flex-item {
    background-color: cornflowerblue;
    width: 60px;
    min-height: 100px;
    margin: 10px;
}

.item1 {
    -webkit-align-self: flex-start;
    align-self: flex-start;
}
.item2 {
    -webkit-align-self: flex-end;
    align-self: flex-end;
}

.item3 {
    -webkit-align-self: center;
    align-self: center;
}

.item4 {
    -webkit-align-self: baseline;
    align-self: baseline;
}

.item5 {
    -webkit-align-self: stretch;
    align-self: stretch;
}
»

flex
The flex property specifies the length of the flex item, relative to the rest of the flex items inside the same container.

In the following example, the first flex item will consume 2/4 of the free space, and the other two flex items will consume 1/4 of the free space each:

Example
.flex-item {
    background-color: cornflowerblue;
    margin: 10px;
}

.item1 {
    -webkit-flex: 2;
    flex: 2;
}

.item2 {
    -webkit-flex: 1;
    flex: 1;
}

.item3 {
    -webkit-flex: 1;
    flex: 1;
}
»

More Examples
Create a responsive website with flexbox
This example demonstrates how to create a responsive website layout with flexbox.

CSS3 Flexbox Properties
The following table lists the CSS properties used with flexbox:

Property Description
display Specifies the type of box used for an HTML element
flex-direction Specifies the direction of the flexible items inside a flex container
justify-content Horizontally aligns the flex items when the items do not use all available space on the main-axis
align-items Vertically aligns the flex items when the items do not use all available space on the cross-axis
flex-wrap Specifies whether the flex items should wrap or not, if there is not enough room for them on one flex line
align-content Modifies the behavior of the flex-wrap property. It is similar to align-items, but instead of aligning flex items, it aligns flex lines
flex-flow A shorthand property for flex-direction and flex-wrap
order Specifies the order of a flexible item relative to the rest of the flex items inside the same container
align-self Used on flex items. Overrides the container’s align-items property
flex Specifies the length of a flex item, relative to the rest of the flex items inside the same container

❮ Previous Next ❯

Toggle navigation
TUTORIAL HOME
CSS3 Media Queries
❮ Previous Next ❯
CSS2 Introduced Media Types
The @media rule, introduced in CSS2, made it possible to define different style rules for different media types.

Examples: You could have one set of style rules for computer screens, one for printers, one for handheld devices, one for television-type devices, and so on.

Unfortunately these media types never got a lot of support by devices, other than the print media type.

CSS3 Introduces Media Queries
Media queries in CSS3 extend the CSS2 media types idea: Instead of looking for a type of device, they look at the capability of the device.

Media queries can be used to check many things, such as:

width and height of the viewport
width and height of the device
orientation (is the tablet/phone in landscape or portrait mode?)
resolution
Using media queries are a popular technique for delivering a tailored style sheet to tablets, iPhone, and Androids.

Browser Support
The numbers in the table specifies the first browser version that fully supports the @media rule.

Property
@media 21.0 9.0 3.5 4.0 9.0
Media Query Syntax
A media query consists of a media type and can contain one or more expressions, which resolve to either true or false.

@media not|only mediatype and (expressions) {
    CSS-Code;
}
The result of the query is true if the specified media type matches the type of device the document is being displayed on and all expressions in the media query are true. When a media query is true, the corresponding style sheet or style rules are applied, following the normal cascading rules.

Unless you use the not or only operators, the media type is optional and the all type will be implied.

You can also have different stylesheets for different media:

CSS3 Media Types
Value Description
all Used for all media type devices
print Used for printers
screen Used for computer screens, tablets, smart-phones etc.
speech Used for screenreaders that “reads” the page out loud
Media Queries Simple Examples
One way to use media queries is to have an alternate CSS section right inside your style sheet.

The following example changes the background-color to lightgreen if the viewport is 480 pixels wide or wider (if the viewport is less than 480 pixels, the background-color will be pink):

Example
@media screen and (min-width: 480px) {
    body {
        background-color: lightgreen;
    }
}
»
The following example shows a menu that will float to the left of the page if the viewport is 480 pixels wide or wider (if the viewport is less than 480 pixels, the menu will be on top of the content):

Example
@media screen and (min-width: 480px) {
    #leftsidebar {width: 200px; float: left;}
    #main {margin-left:216px;}
}
»
CSS3 @media Reference
For a full overview of all the media types and features/expressions, please look at the @media rule in our CSS reference.

❮ Previous Next ❯

Toggle navigation
TUTORIAL HOME
CSS Layout – float and clear
❮ Previous Next ❯
The float property specifies whether or not an element should float.

The clear property is used to control the behavior of floating elements.

The float Property
In its simplest use, the float property can be used to wrap text around images.

The following example specifies that an image should float to the right in a text:

Example
img {
    float: right;
    margin: 0 0 10px 10px;
}
»
The clear Property
The clear property is used to control the behavior of floating elements.

Elements after a floating element will flow around it. To avoid this, use the clear property.

The clear property specifies on which sides of an element floating elements are not allowed to float:

Example
div {
    clear: left;
}
»
The clearfix Hack
If an element is taller than the element containing it, and it is floated, it will overflow outside of its container.

Then we can add overflow: auto; to the containing element to fix this problem:

Example
.clearfix {
    overflow: auto;
}
»
The overflow:auto clearfix works well as long as you are able to keep control of your margins and padding (else you might see scrollbars). The new, modern clearfix hack however, is safer to use, and the following code is used for most webpages:

Example
.clearfix::after {
    content: “”;
    clear: both;
    display: table;
}
»
You will learn more about the ::after pseduo-element in a later chapter.

Web Layout Example
It is common to do entire web layouts using the float property:

Example
.header, .footer {
    background-color: grey;
    color: white;
    padding: 15px;
}

.column {
    float: left;
    padding: 15px;
}

.clearfix::after {
    content: “”;
    clear: both;
    display: table;
}

.menu {
    width: 25%;
}

.content {
    width: 75%;
}
»
More Examples
An image with border and margins that floats to the right in a paragraph
Let an image float to the right in a paragraph. Add border and margins to the image.

An image with a caption that floats to the right
Let an image with a caption float to the right.

Let the first letter of a paragraph float to the left
Let the first letter of a paragraph float to the left and style the letter.

Creating a horizontal menu
Use float with a list of hyperlinks to create a horizontal menu.

Creating a homepage without tables
Use float to create a homepage with a navbar, header, footer, left content and main content.

All CSS Float Properties
Property Description
clear Specifies on which sides of an element where floating elements are not allowed to float
float Specifies whether or not an element should float
overflow Specifies what happens if content overflows an element’s box
overflow-x Specifies what to do with the left/right edges of the content if it overflows the element’s content area
overflow-y Specifies what to do with the top/bottom edges of the content if it overflows the element’s content area

❮ Previous Next ❯

CSS3 Media Queries – Examples
❮ Previous Next ❯
CSS3 Media Queries – More Examples
Let us look at some more examples of using media queries.

We will start with a list of names which function as email links. The HTML is:

Example 1

ul {
    list-style-type: none;
}

ul li a {
    color: green;
    text-decoration: none;
    padding: 3px;
    display: block;
}

 
• <a data-email="johndoe@example.com” href=”mailto:johndoe@example.com“>John Doe

 

• <a data-email="marymoe@example.com” href=”mailto:marymoe@example.com“>Mary Moe

 

• <a data-email="amandapanda@example.com” href=”mailto:amandapanda@example.com“>Amanda Panda

»
Notice the data-email attribute. In HTML5, we can use attributes prefixed with data- to store information. We will use the data- attribute later.

Width from 520 to 699px – Apply an email icon to each link
When the browser’s width is between 520 and 699px, we will apply an email icon to each email link:

Example 2
@media screen and (max-width: 699px) and (min-width: 520px) {
    ul li a {
        padding-left: 30px;
        background: url(email-icon.png) left center no-repeat;
    }
}
»
Width from 700 to 1000px – Preface the links with a text
When the browser’s width is between from 700 to 1000px, we will preface each email link with the text “Email: “:

Example 3
@media screen and (max-width: 1000px) and (min-width: 700px) {
    ul li a:before {
        content: “Email: “;
        font-style: italic;
        color: #666666;
    }
}
»
Width above 1001px – Apply email address to links
When the browser’s width is above 1001px, we will append the email address to the links.

We will use the value of the data- attribute to add the email address after the person’s name:

Example 4
@media screen and (min-width: 1001px) {
    ul li a:after {
        content: ” (” attr(data-email) “)”;
        font-size: 12px;
        font-style: italic;
        color: #666666;
    }
}
»
Width above 1151px – Add icon as we used before
For browser widths above 1151px, we will again add the icon as we used before.

Here, we do not have to write an additional media query block, we can just append an additional media query to our already existing one using a comma (this will behave like an OR operator):

Example 5
@media screen and (max-width: 699px) and (min-width: 520px), (min-width: 1151px) {
    ul li a {
        padding-left: 30px;
        background: url(email-icon.png) left center no-repeat;
    }
}
»
More Examples
Use the list of email links on a sidebar in a web page
This example puts the list of email links into the left sidebar of a webpage.

❮ Previous Next ❯

Toggle navigation
TUTORIAL HOME
Responsive Web Design – Introduction
❮ Previous Next ❯
What is Responsive Web Design?
Responsive web design makes your web page look good on all devices.

Responsive web design uses only HTML and CSS.

Responsive web design is not a program or a JavaScript.

Designing For The Best Experience For All Users
Web pages can be viewed using many different devices: desktops, tablets, and phones. Your web page should look good, and be easy to use, regardless of the device.

Web pages should not leave out information to fit smaller devices, but rather adapt its content to fit any device:

Desktop

Tablet

Phone

It is called responsive web design when you use CSS and HTML to resize, hide, shrink, enlarge, or move the content to make it look good on any screen.

❮ Previous Next ❯

Toggle navigation
TUTORIAL HOME
Responsive Web Design – The Viewport
❮ Previous Next ❯
What is The Viewport?
The viewport is the user’s visible area of a web page.

The viewport varies with the device, and will be smaller on a mobile phone than on a computer screen.

Before tablets and mobile phones, web pages were designed only for computer screens, and it was common for web pages to have a static design and a fixed size.

Then, when we started surfing the internet using tablets and mobile phones, fixed size web pages were too large to fit the viewport. To fix this, browsers on those devices scaled down the entire web page to fit the screen.

This was not perfect!! But a quick fix.

Setting The Viewport
HTML5 introduced a method to let web designers take control over the viewport, through the tag.

You should include the following viewport element in all your web pages:

A viewport element gives the browser instructions on how to control the page’s dimensions and scaling.

The width=device-width part sets the width of the page to follow the screen-width of the device (which will vary depending on the device).

The initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the browser.

Here is an example of a web page without  the viewport meta tag, and the same web page with the viewport meta tag:

Tip: If you are browsing this page with a phone or a tablet, you can click on the two links below to see the difference.

Without the viewport meta tag

With the viewport meta tag

Size Content to The Viewport
Users are used to scroll websites vertically on both desktop and mobile devices – but not horizontally!

So, if the user is forced to scroll horizontally, or zoom out, to see the whole web page it results in a poor user experience.

Some additional rules to follow:

1. Do NOT use large fixed width elements – For example, if an image is displayed at a width wider than the viewport it can cause the viewport to scroll horizontally. Remember to adjust this content to fit within the width of the viewport.

2. Do NOT let the content rely on a particular viewport width to render well – Since screen dimensions and width in CSS pixels vary widely between devices, content should not rely on a particular viewport width to render well.

3. Use CSS media queries to apply different styling for small and large screens – Setting large absolute CSS widths for page elements, will cause the element to be too wide for the viewport on a smaller device. Instead, consider using relative width values, such as width: 100%. Also, be careful of using large absolute positioning values. It may cause the element to fall outside the viewport on small devices.

❮ Previous Next ❯