0

Hi All,
Please study the following code.

HTML

    <div id="welcome">
        Welcome Message 
    </div>
    <div id="Inquiry">
        Inquiry Form
    </div>
    <div id="products">
        Products
    </div>
    <div id="footer">
        footer
    </div>

CSS

#welcome{
    background-image:url(../images/company.jpg);
    background-size: 100% 100%;
    width:100%;
    height:600px;
    }
#inquiry{
    margin-top:600px;
    width:100%;
    height:500px;
    background-image:url(../images/light_grey.png);
    }
#products{
    margin-top:1100px; // (margin-top of inquiry + height of inquiry)
    width:100%;
    height:500px;
    background-image:url(../images/light_blue.png);
    }
    #footer{
    margin-top:1600px; // (margin-top of products + height of products)
    width:100%;
    height:500px;
    background-image:url(../images/black.png);
    }

With these styles, everything is ok in large devices (desktops & tablets).
But in mobiles most of divs are overlapping because of the margin-top values.
I know this is not a propery way of designing website responsively.
Could you please give me a solution?

2
Contributors
2
Replies
13
Views
1 Year
Discussion Span
Last Post by jKidz
1

You can leave out the top margins, because a div tag is a block level element and will by default go on one line. The next div will drop below the other. The heights you set will also automatically push down the next div, so no need for the top margins.

Edited by gentlemedia

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.