CODEWITHSUNDEEP
htmlcss
Iqbal Singh
Iqbal Singh

Reputation: 11

How to avoid the white space shown in the image?

I have been making a website and want to avoid the white space indicated by a arrow when screen size is less than 600px. The website works perfect on tablets, laptops and larger devices but the problem arises on smaller devices. Here is the image . website working good on large devices:

and

website not working on smaller devices:

Here is my 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>

Please tell me the code to solve this problem! Thanks!

Upvotes: 1

Views: 65

Answers (2)

Carlo Longhi
Carlo Longhi

Reputation: 54

You should adapt the width of the .events class adding "width: 100%;" to the code like this:

.events {
background-color:   #F5F5F5;
left: 0;
right: 0;
width: 100%;
}

Upvotes: 0

Dowda
Dowda

Reputation: 19

Have you tried this css:

@media screen and (max-width: 800px) {

img { margin:0; padding:0 }

}

Upvotes: 1

Related Questions