How to make a fully responsive web page [closed]


Tags: html,css,responsive-design,media-queries

Problem :

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>

    CSS Howto..

    How to horizontally center align this absolutely positioned `` tag inside the relatively positioned div?

    How do i add a fading border to my nav bar CSS

    How to convert 2 css files into one swf file in flex 4.11 SDK

    How to include (referencing) CSS Javascript jQuery in master page and content (child) page

    how to color share price changes: using css() method on dynamically created elements?

    Align lists on showing or hiding

    How to apply IE11 specific css [closed]

    How add symbol in CSS for element?

    how do i get images to display in a rows like this using php and css?

    How to create circles around a circle with css, javascript?

    How to hide submenu when user clicks option, but still display when user hovers over menu

    How to remove “gap” from nav bar and line?

    How to select text that is not marked up with CSS/jquery?

    How to make content div full height when using padding on wrapper?

    How to create CSS3 bounce effect

    How to add styling to active input's previous sibling using CSS only [duplicate]

    How do I fix my css floats on IE 6 & 7? Or how can I lay this out better?

    How can I force menu items to fit to column width?

    How do you structure css files for a web project?

    How to fix this cell in the GridView?

    How do I force/enable vertical scrolling in this html5/css3 page?

    How to separate html header and content with css and make the content scrollable

    CSS: How to move contents of one div into another one

    How to create Chrome DevTool style bar charts with grids using plain CSS/HTML?

    How do prevent my div from spilling outside its parent container?

    How To Remove Awesomium.net Scroll Bars? & Auto Scroll?

    How to change the background color of a div in HTML/CSS

    How to override CSS Box Sizing for just one area on page?

    style a navigation link when a particular div is shown

    How can I delay the speed of hover purely via CSS3 for a div?