Skip to main content

You are not logged in. Your edit will be placed in a queue until it is peer reviewed.

We welcome edits that make the post easier to understand and more valuable for readers. Because community members review edits, please try to make the post substantially better than how you found it, for example, by fixing grammar or adding additional resources and hyperlinks.

Required fields*

How to make form responsive in css?

I have a screenshot as shown below which I have to replicate in HTML/CSS. The below screenshot should look exactly the same both in desktop and mobile view.

enter image description here

At this moment, I am able to get this in fiddle which looks good in desktop view but I can see white spacing at the right in mobile view.



I think I need to make some changes in the below CSS codes but not sure if this is the right class which needs to be change. 

.login-page .form .login-form .add-winner {
    display: block;
    margin-left: auto;
    margin-right: auto;
    border: 1px solid #1173B7;
    background-color: white;
    color: #1173B7;
    font-size: 14px;
    width: 25%;
    font-weight: bold;
    font-family: "Open Sans";
    outline: 0;
    border-radius: 20px;
    padding: 10px;
    cursor: pointer;
    margin-bottom: 6%;
}

.login-page .form .login-form .save {
    display: block;
    margin-left: auto;
    margin-right: auto;
    background-color: #C4C4C4;
    border: 1px;
    color: white;
    font-size: 14px;
    width: 35%;
    font-weight: bold;
    font-family: "Open Sans";
    border-radius: 20px;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
    cursor: pointer;
    margin-bottom: 6%;
}

Problem Statement:

I am wondering what changes I should make in the CSS in the fiddle so that the above design looks exactly the same both in mobile and desktop view.

At this moment, I am seeing white space at the right in mobile view.

Answer*

Cancel
2
  • It worked for me. I have one more query. I am wondering if there is any way I can replace the white spacing from the bottom with the background color: BFBFBF. If you check the fiddle there is white spacing at the bottom. I want to replace that white spacing with the background color: BFBFBF
    – flash
    Commented Apr 30, 2018 at 19:04
  • Update your CSS for body and .login-page: body{ height: 100%; } .login-page { background-color: #BFBFBF; padding-top: 25px; height: 100% }
    – swapnil89
    Commented May 1, 2018 at 17:35