Search code examples
htmlcssmedia-queries

From float:left and right to under eachother


I am busy with my portfolio site and I am going to make it responsive.

The most things are responsive but i'm struggling with the contact page.

Code:

.footerContact .informatie
{
    float: left;
    margin-left: 20%;
    margin-top: 10%;
    color: white;
    width: 250px;
}

.footerContact .form
{
    float: right;
    margin-right: 20%;
    margin-top: 10%;
    color: white;
    width: 300px;
}

Now i am using a media query to put them under each other when de screen size is smaller as 1115px

Example can be found here

How can i do this?

@media only screen and (max-width: 1115px) 
{
    .footerContact .informatie
    {
        float: none;
        margin-left: 20%;
         margin-top: 10%;
         color: white;
        width: 250px;
    }   

    .footerContact .form
    {
        float: none;
        margin-left: 20%;
        margin-top: 100px;
        color: white;
        width: 250px;
    }

}

Solution

  • Your form is working properly in responsive mode.

    You just have to set margin: auto to center align divs.

    Fiddle: http://jsfiddle.net/L2mvewLo/1/