how to make a responsive website using html/css and javascript

Question

I wanted to know how a html /css design can be made responsive so that (if that's what responsive means) the div are arranged according to the screen size(in case of desktop browser being resized manually at runtime). for example : i have div1, div2, div3 set as float left. they appear as 3 columns in my browser. Now if i resize(to a smaller size) my browser i want the div1 to come on top. div2 below it and div 3 below div2. similarly, if i resize my web page fully i want the divs to again appear as 3 columns.

apart from the normal defalut behavior , is there any way through which changes can be specified separately?

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>

    <div id="div1" style="width:500px;height:200px;background-color:red;float:left;"></div>
    <div id="div2" style="width:500px;height:200px;background-color:yellow;float:left;"></div>
    <div id="div3" style="width:400px;height:200px;background-color:green;float:left;"></div>

</body>
</html>

please any help would be greatly appreciated. I am completely new to responsive design layout.

You can read about css bootstrap http://getbootstrap.com/css/ — Aminesrine, Nov 23 '15 at 08:31
You can use Media queries. Way to make responsive using CSS https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries — Niranth Reddy, Nov 23 '15 at 08:40

score 3 · Answer 1 · edited May 23 '17 at 12:02

3

This is mainly achieved with CSS3 Media queries. You can use a CSS frameworks and follow the grid system to reduce your workload.

CSS3 @media Rule

Frontend Frameworks

Duplicate of following stack overflow questions

edited May 23 '17 at 12:02

Community

1
1

answered Nov 23 '15 at 08:53

Pradeep Sanjaya

1,816
1
15
23

If it's a duplicate, then mark it as a duplicate. – Nov 23 '15 at 09:24
@torazaburo, Flagged as duplicate – Pradeep Sanjaya Nov 23 '15 at 09:30

score 1 · Answer 2 · answered Nov 23 '15 at 08:33

You have to use percentage instead of fixed pixel-values. This is called "making the design fluid".

Have a look at this: https://teamtreehouse.com/community/pixel-to-percentage-conversion

There will be points (when the width becomes to small) at which you're layout doesn't work anymore. Then you use media-queries to re-structure your layout.

score 1 · Accepted Answer · answered Nov 23 '15 at 08:53

The basics of a responsive layout are the use of percentage insteed of pixels and adding breakpoints with media queries.

In your example, you have 3 divs floating so the css should look like this:

#div1, #div2, #div3 {
    float:left;
    height:200px;
}
#div1 {
    background-color:red;
    width:40%;
}
#div2 {
    background-color:yellow;
    width:40%;
}
#div3 {
    background-color:green;
    width:20%;
}

Always making the sum of all your floating widths 100%.

Then add a breaking point (or as many as you need) like this:

@media (max-width: 600px) {
    #div1, #div2, #div3 {width:100%;}
  }

where you tell your browser to change the css properties of your divs when window width is 600px or lower. In this case you make each div 100% width so they will stack as you want keeping the html order.

JSFIDDLE

how to make a responsive website using html/css and javascript

3 Answers3

Linked