InMotion Hosting Support Center

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

Was this article helpful?
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

Related Questions

Here are a few questions related to this article that our customers have asked:
Ooops! It looks like there are no questions about this page.
Would you like to ask a question about this page? If so, click the button below!
Ask a Question

Forum Login

You are NOT logged in. You can still browse our Support Center.

To participate within our Community Support Forum:

n/a Points
2015-03-21 1:47 am

<a href="">yemek oyunlar?</a> I want to make a mobile compatible system

Post a Comment

Email Address:
Phone Number:

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

1 Questions & Comments

Post a comment

Back to first comment | top

Need more Help?


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:
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!