CSS 相对位置 div 没有响应
CSS position relative div not responsive
你好,我有一个背景,我想像这张照片一样在上面添加 div
我正在使用 bulma css 框架
我能够通过编写这段代码来实现这种外观
index.html
<div class="section newsletter">
<figure class="image">
<img src="src/img/newsletter.png">
</figure>
<div class="form">
<h5>Keep updated with out latest news.<br>Subscribe to our newsletter</h5>
<div class="field has-addons">
<div class="control">
<input class="input" type="text" placeholder="Enter Your Email">
</div>
<div class="control">
<a type="button" class="button btn-grad is-dark">
Subscribe
</a>
</div>
</div>
</div>
</div>
css
.newsletter{
padding:0px;
.form{
display: flex;
flex-direction: column;
width:588px;
height:297px;
background: $bg-transperant;
box-shadow: 0px 5px 14px rgba(0, 0, 0, 0.15);
border-radius: 16px;
// Layout
position: relative;
left: 140px;
top: -386px;
h5{
padding: 50px 60px 40px 60px;
font-weight: 600;
font-size: 25px;
line-height: 46px;
color: #2F4B6E;
}
div{
justify-content: center;
}
.input{
height: 50px;
width: 352px;
box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.15);
border-bottom-left-radius: 100px;
border-top-left-radius: 100px;
}
}
}
问题是它在手机或平板电脑上没有响应
看起来像这样
我使用相对位置可以将 div 放在图像的顶部
我怎样才能做得更好,例如让它响应?
图片下面还有一大片白色的space不知道为什么
实时项目回购 https://github.com/Ov3rControl/ReachGate
现场概览:https://ov3rcontrol.github.io/ReachGate/
这可能是 3 个问题的总和。
1) 确保您有 your viewport set to responsive in the head
2) 不要对超出最小可能视口的容器使用 hard-coded 尺寸。请注意,您的表单设置为 588px 宽度。尝试做 width: auto;
,然后 max-width: 588px;
。
3) 不考虑hard-coding你的定位。尝试 something like this 而不是将相对定位的容器居中。
虽然看起来很漂亮,干得好!旁白:出于可访问性目的,始终将标签绑定到输入被认为是一种很好的做法。如果你不希望它可见,那很好! See this
我执行了以下操作以响应地居中表单:
<!------------------------------------[NewsLetter Section - START]------------------------------------------->
<div class="section newsletter">
<div class="form">
<h5>Keep updated with our latest news.<br>Subscribe to our newsletter</h5>
<div class="field has-addons">
<div class="control">
<input class="input" type="text" placeholder="Enter Your Email">
</div>
<div class="control">
<a type="button" class="button btn-grad is-dark">
Subscribe
</a>
</div>
</div>
</div>
</div>
<!------------------------------------[NewsLetter Section - END]------------------------------------------->
.newsletter {
padding: 0px;
background-image: url('src/img/newsletter.png');
height: 400px;
display: flex;
align-items: center;
justify-content: center;
.form {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
max-height: 270px;
max-width: 320px;
background: $bg-transperant;
box-shadow: 0px 5px 14px rgba(0, 0, 0, 0.15);
border-radius: 16px;
// Layout
h5 {
padding: 50px 60px 40px 60px;
font-weight: 600;
font-size: 25px;
line-height: 46px;
color: #2f4b6e;
}
div {
justify-content: center;
}
.input {
height: auto;
height: 50px;
width: 352px;
box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.15);
border-bottom-left-radius: 100px;
border-top-left-radius: 100px;
}
}
}
你好,我有一个背景,我想像这张照片一样在上面添加 div
我正在使用 bulma css 框架
index.html
<div class="section newsletter">
<figure class="image">
<img src="src/img/newsletter.png">
</figure>
<div class="form">
<h5>Keep updated with out latest news.<br>Subscribe to our newsletter</h5>
<div class="field has-addons">
<div class="control">
<input class="input" type="text" placeholder="Enter Your Email">
</div>
<div class="control">
<a type="button" class="button btn-grad is-dark">
Subscribe
</a>
</div>
</div>
</div>
</div>
css
.newsletter{
padding:0px;
.form{
display: flex;
flex-direction: column;
width:588px;
height:297px;
background: $bg-transperant;
box-shadow: 0px 5px 14px rgba(0, 0, 0, 0.15);
border-radius: 16px;
// Layout
position: relative;
left: 140px;
top: -386px;
h5{
padding: 50px 60px 40px 60px;
font-weight: 600;
font-size: 25px;
line-height: 46px;
color: #2F4B6E;
}
div{
justify-content: center;
}
.input{
height: 50px;
width: 352px;
box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.15);
border-bottom-left-radius: 100px;
border-top-left-radius: 100px;
}
}
}
问题是它在手机或平板电脑上没有响应
看起来像这样
我使用相对位置可以将 div 放在图像的顶部 我怎样才能做得更好,例如让它响应? 图片下面还有一大片白色的space不知道为什么
实时项目回购 https://github.com/Ov3rControl/ReachGate 现场概览:https://ov3rcontrol.github.io/ReachGate/
这可能是 3 个问题的总和。
1) 确保您有 your viewport set to responsive in the head
2) 不要对超出最小可能视口的容器使用 hard-coded 尺寸。请注意,您的表单设置为 588px 宽度。尝试做 width: auto;
,然后 max-width: 588px;
。
3) 不考虑hard-coding你的定位。尝试 something like this 而不是将相对定位的容器居中。
虽然看起来很漂亮,干得好!旁白:出于可访问性目的,始终将标签绑定到输入被认为是一种很好的做法。如果你不希望它可见,那很好! See this
我执行了以下操作以响应地居中表单:
<!------------------------------------[NewsLetter Section - START]------------------------------------------->
<div class="section newsletter">
<div class="form">
<h5>Keep updated with our latest news.<br>Subscribe to our newsletter</h5>
<div class="field has-addons">
<div class="control">
<input class="input" type="text" placeholder="Enter Your Email">
</div>
<div class="control">
<a type="button" class="button btn-grad is-dark">
Subscribe
</a>
</div>
</div>
</div>
</div>
<!------------------------------------[NewsLetter Section - END]------------------------------------------->
.newsletter {
padding: 0px;
background-image: url('src/img/newsletter.png');
height: 400px;
display: flex;
align-items: center;
justify-content: center;
.form {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
max-height: 270px;
max-width: 320px;
background: $bg-transperant;
box-shadow: 0px 5px 14px rgba(0, 0, 0, 0.15);
border-radius: 16px;
// Layout
h5 {
padding: 50px 60px 40px 60px;
font-weight: 600;
font-size: 25px;
line-height: 46px;
color: #2f4b6e;
}
div {
justify-content: center;
}
.input {
height: auto;
height: 50px;
width: 352px;
box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.15);
border-bottom-left-radius: 100px;
border-top-left-radius: 100px;
}
}
}