[英]How to make form responsive in css?
I have a screenshot as shown below which I have to replicate in HTML/CSS. 我有一个截图,如下所示,我必须在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. 我想我需要在下面的CSS代码中进行一些更改,但是不确定这是否是需要更改的正确类。
.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. 我想知道我应该对CSS进行哪些更改,以便上述设计在移动和桌面视图中看起来完全相同。
At this moment, I am seeing white space at the right in mobile view . 此刻,我在移动视图中看到右侧的空白。
Your form
element has a static width of 500px set. 您的
form
元素的静态宽度设置为500px。
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;
}
Just change the CSS on line 52 in fiddle to: 只需将第52行的CSS更改为:
.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. 我为您的表单设置了最大宽度,以便跨过500px宽度时将表单的宽度设置为500px。 Otherwise, it will be 100% of the width of the browser area.
否则,它将是浏览器区域宽度的100%。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.