Search code examples
htmlcssresponsive-designmedia-queries

How to make a fully responsive web page

I'm building a simple web page with two divs: 

<body>
  <div id="content"><img src="img/Apples.jpg"></div>
  <div id="footer"><p>Some words!</p></div>
</body>

The "content" div has to be always above the "footer" div and the two divs have to be always displayed on each page size.
How can I do that?

Thanks!

Here is my CSS:

body {
    padding: 18px;
}

#content {
    /*width: 70%;*/
    height: 70%;
    display: block;
    margin: auto;
}

#content img {
    width: 100%;
    height: auto;
}


#footer{
    /*width: 30%;*/
    height: 30%;
    display: block;
    margin: auto;
}

#footer p {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

UPDATE:

Here is my solution:

HTML:

<body>
    <div id="content"></div>
    <div id="footer"><p>Some words!</p></div>
</body>

Stylesheet:

body {
    padding: 20px;
}

#content {
    width: 100%;
    background-image: url('img/Apples.jpg');
    background-size: cover;
    background-position: center;
    height: 570px;
    margin-bottom: 10px;
}

#footer{
    height: 100%;
    border-style: double;
    border-color: black;
}

#footer p {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

/* Landscape phones and down */
@media (max-width: 340px) { 
    #content {
        height: 370px;
    }
}

/* Landscape phone to portrait tablet */
@media (min-width: 340px) and (max-width: 500px) { 
    #content {
        height: 215px;
    }
}

/* Landscape phone to portrait tablet */
@media (min-width: 501px) and (max-width: 767px) { 
    #content {
        height: 660px;
    }
}

/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 801px){
    #content {
        height: 870px;
    }
}

But I am not able to adjust the layout for each device. How can I do it?

Solution 
  • <body>
  <div id="content" style="height:70%;display:block;"><img src="img/Apples.jpg"></div>
  <div id="footer" style="height:30%;display:block;"><p>Some words!</p></div>
</body>