div在手机视图中消失
问题描述:
所以,我是新来的响应式设计,并将表单代码放在一个图像的顶部,它不会显示在移动视图中。它看起来发生在990像素左右,表格将失去视觉。我无法确定@media或什么CSS类将在某个宽度后隐藏表单的位置。div在手机视图中消失
网址:subscribe.ign.com/social
<div class="site-slider">
<div class="slider">
<div class="flexslider">
<ul class="slides">
<li>
<div class="overlay"></div>
<img src="http://static.ziffdavis.com.s3.amazonaws.com/cimages/blackfriday/Black-Friday-Email-Landing-Pages/black-friday-chaos-store-1600x750.png" alt="">
<div class="slider-caption visible-md visible-lg">
<div id="bouncex" align="center" style="width:558px; margin: 0 auto; ">
<!--LYRIS-->
<div class="heading-section col-md-12 text-center">
<div class="contact-form" style="background-color:#000 !important; padding: 25px">
<h2 style="text-transform:capitalize; font-size:34px">BLACK FRIDAY IS COMING</h2>
<br/>
<p style="text-transform:capitalize; font-size:28px">UP TO 50% OFF</p>
<h2 style="text-transform:capitalize; font-size:24px">ON HOTTEST GAMES AND TECH DEALS DELIVERED TO YOUR INBOX</h2>
<form name="contactform" id="contactform">
<p><input name="txtEmail" id="txtEmail" type="text" placeholder="Your Email">
</p>
<input type="button" class="mainBtn" name="btnSubscribe" id="btnSubscribe" value="Subscribe">
<input type="hidden" name="txtList" id="txtList" size="70" value="ign-deals" />
<p style="color:#FFF;font-size:14px">Subscribing to a newsletter indicates your consent <br/>to our <a style="color:#d3222a; text-decoration:underline" href="http://www.ziffdavis.com/terms-of-use" title="Terms of Use" rel="nofollow">User Agreement</a> and <a style="color:#d3222a; text-decoration:underline" href="http://www.ziffdavis.com/privacy-policy" title="Privacy Policy" rel="nofollow">Privacy Policy</a><span id="article-punctuation" class="article-punctuation">
</span></p>
</form>
</div> <!-- /.contact-form -->
</div> <!-- END LYRIS -->
</div>
</div>
</li>
</ul>
</div> <!-- /.flexslider -->
</div> <!-- /.slider -->
</div> <!-- /.site-slider -->
答
刚刚设置:
<ul class="slides" style="list-style:none; padding-left: 0;">
<img style="width: 100%; " src="your url" alt="">
答
你与slider-caption
类的DIV也有visible-md visible-lg
,你应该删除这2个类。基本上,它使div仅在992px宽度或更大的屏幕上可见。
您可以了解更多关于它的bootstrap documentation
答
的原因是“消失”是因为父元素:<div class="slider-caption visible-md visible-lg">
。
它得到display: none !important;
在992px
这是一个bootstrap断点。具体而言,它是正在做的visible-*
类。 Read about that in the Bootstrap docs。
请在这里张贴CSS – cocoa