我一直在做一个网站,当屏幕尺寸小于600像素时,我想避免用箭头指示的空白。该网站可在平板电脑,笔记本电脑和较大的设备上完美运行,但在较小的设备上会出现问题。 这是图片。 网站在大型设备上运行良好:
和
网站无法在较小的设备上运行:
这是我的CSS
.events {
background-color: #F5F5F5;
left: 0;
right: 0;
}
.eone {
box-shadow: 5px 5px 18px grey;
margin-bottom: 5%;
}
.events h1 {
margin-left: 3%;
padding: 2%;
}
.content h2 {
padding-top : 2%;
padding-left: 2%;
color: #00ccff;
font-family: 'Lato', sans-serif;
}
.eone img {
width: 100%;
}
.content p {
font-size: 20px;
padding-left: 2%;
padding-bottom: 8%;
}
.etwo {
box-shadow: 5px 5px 18px grey;
margin-bottom: 5%;
margin-left: 20%;
}
.contenttwo h2 {
padding-top : 2%;
padding-left: 2%;
color: #00ccff;
font-family: 'Lato', sans-serif;
}
.etwo img {
width: 100%;
}
.contenttwo p {
font-size: 20px;
padding-left: 2%;
}
//media queries
Here is My html
<div class="events">
<h1>Events</h1>
<div class="container">
<div class="row">
<div class="col-md-5">
<div class="eone">
<img src="off.gif">
<div class="content">
<h2>Monsoon Dhamaka!</h2>
<p>This monsoon fly high with Gill Travels and at a price that will suit your pockets .Book a ticket now and avail upto <strong>50% Discount</strong> on ticket of Chandigarh to Malayasia.<strong>Also get discount of upto 60% on booking of four tickets together.</strong> </p>
</div>
</div>
</div>
<div class="col-md-7">
<div class="etwo">
<img src="social.gif">
<div class="contenttwo">
<h2>Earn Free Paytm Cash!</h2>
<p>Sign up at our website to earn free paytm cash upto Rs.100. You may follow us on Facebook@ gillairtravel, Instagram @ gillairtravelpatiala, twitter @ and Suscribe our youtube channel @ gillairtravels to earn free paytm cash.<strong>Refer and earn upto Rs.2000 when a person buys a ticket.</strong></p>
</div>
</div>
</div>
</div>
</div>
</div>
请告诉我代码以解决此问题! 谢谢!
答案 0 :(得分:1)
您是否尝试过此CSS:
@media屏幕和(最大宽度:800像素){
img {边距:0; padding:0}
}
答案 1 :(得分:0)
您应该修改.events类的宽度,添加“ width:100%;”。像这样的代码:
.events {
background-color: #F5F5F5;
left: 0;
right: 0;
width: 100%;
}