In order for your Responsive Template to work, you will need to make at least 3 different stylesheets. The stylesheets will load depending on the size of the screen of the device. We will explain how to attach the style sheets in the next article. In the meantime we will make 3 different stylesheets, a Desktop (style.css), Tablet (medium-style.css), and a Mobile Stylesheet (mobile-style.css).

Make the general CSS style sheet

Your website will need a style sheet that holds CSS styles that do not change throughout the site. The CSS we will use is the code below. You will need to create a styles.css stylesheet to store the CSS code.

body{background:#555555;margin:0%; padding:0%;}
#header-content{margin:0%; padding:2%; background-color:#dddddd; height:50px;}
#main-content{margin:0% auto; padding:2%; background-color:#eeeeee;}
#inner-content{height:auto}
#footer-content{clear: both; margin:0%; padding:2%;background-color:#dddddd; height:70px}
h2{margin:0% 0% 2% 0%;padding:0%}

The previous code will display the colors for the background and the styles for the footer, header, and content. Next we will create the code for making the boxes change when the device screen is changed.


Creating the CSS Stylesheets for the Responsive Template

What we are going to do in the next style sheets is create a different size for the box elements. We named the boxes in the page the "box" class. The Box class is what we will change in each sheet for the images and the box size.

1. Desktop Stylesheet: min-device-width: 1440px

Create Responsive Template Desktop code First you will need to create a file called desktop-style.css. Once you have the stylesheet created, you will need to paste the code below in the file and save it. The final result of this stylesheet will look like the snapshot to the right.

#wrapper{border:none; margin:0% auto; padding:0%; width:80%; min-width:1440px;max-width:1600px}
.box{background:#ffffff;padding:2%;margin:2% 0% 0% 2%;width:18%;display:inline-block;vertical-align:top;border:1px solid #999999}
.image-box{max-width:40%;float:left;padding:0px 2% 1% 0%;}

The previous code will display the Responsive site .box items horizontally. The wrapper of the site will fix the maximum width to 1600 pixels and minimum at 1240 pixels. It sets the boxes width to 18% displays the boxes inline-block and aligns them vertically top. This allows the site to display horizontally.


2. Tablet Stylesheet: min-width: 800px and max-width: 1440px

Create Responsive Template tablet stylesNext your will need to make a stylesheet called medium-style.css. The below code is different from the last. This code will stack the .box items in 2 columns. Paste the code in the medium-style.css sheet and save the file. The final result of this stylesheet will look like the snapshot to the right.

#wrapper{border:none; margin:0% auto; padding:0%; width:80%; min-width:700px;max-width:1439px}
.box{background:#ffffff;padding:2%;margin:2% 0% 2% 2%;width:43%;display:inline-block;vertical-align:top;border:1px solid #999999}
.image-box{max-width:40%;float:left;padding:0px 2% 1% 0%;}

This will display the site with 2 columns when the browser window or the device screen is between 700 and 1439 pixels. The width for the boxes is set to 43% to make them float in columns.

3. Mobile Stylesheet: min-width: 100px and max-width: 799px

Create Responsive Template Mobile StylesNow for the mobile stylesheet. Create a file called mobile-style.css. Paste the following code in that sheet and save the changes. The final result of this stylesheet will look like the snapshot to the right.

#wrapper{border:none; margin:0%; padding:0%;min-width:200px;width:100%}
.box{background:#ffffff;width:92%;padding:2%;display:inline-block;vertical-align:top;border:1px solid #999999}
.image-box{padding:0% 2% 2% 0%;max-width:100px;}

The previous code will display the site with the .box items stacking vertically on each other. When this stylesheet loads, you will see the boxes at 92% width. So when the screen gets below 700 pixels the boxes will float vertically. This allows a small screen to display the site better.

Now when you are finished adding the CSS code to each stylesheet, you can now link the stylesheets to your Responsive Web Template.

Continued Education in Course 206: Creating Responsive Templates
You are viewing Section 3: Step 2: Adding CSS styles to a Responsive Template
Section 2: Step 1: Adding HTML to the Responsive Template
Section 4: Step 3: Links to the stylesheets in Responsive Templates
Did you find this article helpful?

We value your feedback!

Why was this article not helpful? (Check all that apply)
The article is too difficult or too technical to follow.
There is a step or detail missing from the instructions.
The information is incorrect or out-of-date.
It does not resolve the question/problem I have.
How did you find this article?
Please tell us how we can improve this article:
Email Address
Name

new! - Enter your name and email address above and we will post your feedback in the comments on this page!

Post a Comment

Name:
Email Address:
Phone Number:
Comment:
Submit

Please note: Your name and comment will be displayed, but we will not show your email address.

0 Questions & Comments

Post a comment

Back to first comment | top

Need more Help?

Search

Ask the Community!

Get help with your questions from our community of like-minded hosting users and InMotion Hosting Staff.

Current Customers

Chat: Click to Chat Now E-mail: support@InMotionHosting.com
Call: 888-321-HOST (4678) Ticket: Submit a Support Ticket

Not a Customer?

Get web hosting from a company that is here to help. Sign up today!