How to make form responsive in css?

Question

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.

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.

Rather than using percentages, you should be using media queries to specify different sizes at different breakpoints. — APAD1, Commented Apr 30, 2018 at 17:27
@APAD1 Thanks. I am wondering if you can update it in the fiddle. — flash, Commented Apr 30, 2018 at 17:29
@APAD1 I am bit unsure where I have to use the media queries and in which class — flash, Commented Apr 30, 2018 at 17:36

swapnil89 · Accepted Answer · 2018-04-30 17:36:00Z

3

Just change the CSS on line 52 in fiddle to:

.form {
background: #FFFFFF;
width: 100%;
height: 500px;
max-width: 500px;
margin: 0 auto 100px;
box-sizing: border-box;
padding: 50px;
text-align: center;
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 
0.24);
}

I have set a max-width for your form so that the width of the form is set to 500px as it crosses the 500px width. Otherwise, it will be 100% of the width of the browser area.

answered Apr 30, 2018 at 17:36

swapnil89

664 bronze badges

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

Add a comment |

mattlarsen0 · Accepted Answer · 2018-04-30 17:27:48Z

2

Your form element has a static width of 500px set.

Change it to something like:

form {
    max-width: 500px;
    width: 100%;
}

It may also be helpful to add this so the padding is included with the width calculations:

form {
    box-sizing: border-box;
}

answered Apr 30, 2018 at 17:27

mattlarsen0

1237 bronze badges

Add a comment |

Collectives™ on Stack Overflow

How to make form responsive in css?

2 Answers 2

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Your Answer

Sign up or log in

Post as a guest

Related