CODEWITHSUNDEEP
htmlcss
Saransh Seth
Saransh Seth

Reputation: 77

How is this blank space coming in my website?

My HTML code:

    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link rel="shortcut icon" href="images/favicon.ico">
    <title>Bla Bla Car Rentals - Payment</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <link rel="stylesheet" href="styles/style.css"> <!-- Link to style.css -->
    <script src="https://use.fontawesome.com/62011a4bec.js"></script><link href="https://use.fontawesome.com/62011a4bec.css" media="all" rel="stylesheet"> <!-- Font awesome CDN -->
    <script src="js/part2.js"></script>
</head>
<body>
<section class="bgimg">
    <a class="back-button" href="enquiry.html"><i class="fa fa-chevron-left" aria-hidden="true"></i> Back to website</a>
    <h1 class="heading">Payment</h1>
</section>
<div class="main">
    <div id="container">
        <div id="img-sec">
            <img id="car-img" src="images/bmw-m3.jpg">
        </div>
        <div id="summary-sec"><label>BMW - M3<span class="right-text"> 250AUD (per day)</span></label><br><label>Number of days <span class="right-text">X 1</span></label><br><label>Product total: <span class="right-text">250 AUD</span></label><br><label>Insurance Cover<span class="right-text">+50 AUD</span></label><br><label>Sports model<span class="right-text">+100 AUD</span></label><br><label>Snow Insurance Cover<span class="right-text">+0 AUD</span></label><br><hr><label class="grand">Total: <span class="right-text">400 AUD </span></label></div>
    </div>
</div>

</body>

My CSS code:

    body {
  margin: 0;
  padding: 0;
  font-family: 'Open Sans', sans-serif;
  font-size:13px;
  font-weight: 300;
  position:relative;
  background-color:#2D112A;
}

    .bgimg{
  width: 100%;
  height: 500px;
  background: url('images/money.jpg') no-repeat center; /* Link - https://unsplash.com/collections/597225/money?photo=OCrPJce6GPk */
  background-size: cover;
  position: relative;
}
.main{
  width: 100%;
  height: 550px;
  background: #F5F5F5;
  position: relative;
  padding-top: 6%;
}

.main:before{
  content: '';
  width: 50%;
  height: 100px;
  position: absolute;
  top: -48px;
  left: 0;
  background: #F5F5F5;
  transform: skewY(6deg);
}
.main:after{
  content: '';
  width: 50%;
  height: 100px;
  position: absolute;
  top: -48px;
  right: 0;
  background: #F5F5F5;
  transform: skewY(-6deg);
}
.back-button{
  position: absolute;
  top: 8%;
  left: 3%;
  font-size: 20px;
  background: none;
  color: whitesmoke;
  border: 2px solid whitesmoke;
  border-radius: 10px;
  padding: 13px;
  cursor:pointer;
  text-decoration: none;
}
.back-button i{
  margin-right: 5px;
  font-size: 18px;
}
#container{
  margin: 0 auto;
  height: 530px;
  width: 70%;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
#img-sec{
  width: 50%;
  height: 100%;
  float: left;
}
#summary-sec{
  width: 50%;
  height: 100%;
  float: left;
}
#car-img{
  height: 100%;
  width: 100%;
}
.heading{
  color: whitesmoke;
  margin: 0;
  position: relative;
  font-size: 42px;
  left: 45%;
  top: 7%;
  font-family: 'Merriweather', serif;
}

Normal visible page Part with unknown space Here is the screenshot of my website. I checked all the css for extra padding or margin but there is none.I even tried to inspect it with Google developer tools but didn't get to the source. I don't understand how is the blank space appeared on the left side of the whole page! Help would be much appreciated! Thanks

JSFiddleLink

Upvotes: 0

Views: 119

Answers (7)

Chirag S Modi
Chirag S Modi

Reputation: 419

The issue is in your h1.heading tag css. you have added left:45% was causing the problem. So I have added the fix for that. Bellow is the snippet. 

.heading {
   color: #f5f5f5;
   font-family: "Merriweather",serif;
   font-size: 42px;
   left: 45%;
   margin: 0;
   position: relative;
   text-align: center;
   top: 7%;
}

Here is the full working code. Hope this will solve you problem

  body {
    margin: 0;
    padding: 0;
    font-family: 'Open Sans', sans-serif;
    font-size: 13px;
    font-weight: 300;
    position: relative;
    background-color: #2D112A;
  }
  
  .bgimg {
    width: 100%;
    height: 500px;
    background: url('images/money.jpg') no-repeat center;
    /* Link - https://unsplash.com/collections/597225/money?photo=OCrPJce6GPk */
    background-size: cover;
    position: relative;
  }
  
  .main {
    width: 100%;
    height: 550px;
    background: #F5F5F5;
    position: relative;
    padding-top: 6%;
  }
  
  .main:before {
    content: '';
    width: 50%;
    height: 100px;
    position: absolute;
    top: -48px;
    left: 0;
    background: #F5F5F5;
    transform: skewY(6deg);
  }
  
  .main:after {
    content: '';
    width: 50%;
    height: 100px;
    position: absolute;
    top: -48px;
    right: 0;
    background: #F5F5F5;
    transform: skewY(-6deg);
  }
  
  .back-button {
    position: absolute;
    top: 8%;
    left: 3%;
    font-size: 20px;
    background: none;
    color: whitesmoke;
    border: 2px solid whitesmoke;
    border-radius: 10px;
    padding: 13px;
    cursor: pointer;
    text-decoration: none;
  }
  
  .back-button i {
    margin-right: 5px;
    font-size: 18px;
  }
  
  #container {
    margin: 0 auto;
    height: 530px;
    width: 70%;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  }
  
  #img-sec {
    width: 50%;
    height: 100%;
    float: left;
  }
  
  #summary-sec {
    width: 50%;
    height: 100%;
    float: left;
  }
  
  #car-img {
    height: 100%;
    width: 100%;
  }
  
  .heading {
    color: whitesmoke;
    margin: 0;
    position: relative;
    font-size: 42px;
    /*left: 45%;*/
    text-align:center;
    top: 7%;
    font-family: 'Merriweather', serif;
  }
<link rel="shortcut icon" href="images/favicon.ico">
<title>Bla Bla Car Rentals - Payment</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="js/part2.js"></script>

<body>
  <section class="bgimg">
    <a class="back-button" href="enquiry.html"><i class="fa fa-chevron-left" aria-hidden="true"></i> Back to website</a>
    <h1 class="heading">Payment</h1>
  </section>
  <div class="main">
    <div id="container">
      <div id="img-sec">
        <img id="car-img" src="images/bmw-m3.jpg">
      </div>
      <div id="summary-sec">
        <label>BMW - M3<span class="right-text"> 250AUD (per day)</span></label>
        <br>
        <label>Number of days <span class="right-text">X 1</span></label>
        <br>
        <label>Product total: <span class="right-text">250 AUD</span></label>
        <br>
        <label>Insurance Cover<span class="right-text">+50 AUD</span></label>
        <br>
        <label>Sports model<span class="right-text">+100 AUD</span></label>
        <br>
        <label>Snow Insurance Cover<span class="right-text">+0 AUD</span></label>
        <br>
        <hr>
        <label class="grand">Total: <span class="right-text">400 AUD </span></label>
      </div>
    </div>
  </div>

</body>

Upvotes: 0

Deepak Kumar
Deepak Kumar

Reputation: 221

I have one simple solution, use can just change your position type for heading class. Like this :-

.heading{
  color: whitesmoke;
  margin: 0;
  position: absolute;
  font-size: 42px;
  left: 45%;
  top: 7%;
  font-family: 'Merriweather', serif;
}

Upvotes: 0

Darshan_Mistry
Darshan_Mistry

Reputation: 61

try to add viewport meta in your file

Insert this line in your code after the first meta tag.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Upvotes: 0

Sahil Dhir
Sahil Dhir

Reputation: 4250

The problem is in your h1 tag css . The left:45% was causing the problem. So I have added the fix for that.

.heading {
  color: whitesmoke;
  margin: 0;
  position: relative;
  font-size: 42px;
  /* left: 45%;*/
  top: 7%;
  font-family: 'Merriweather', serif;
  /*New Css*/
  width: 100%;
  text-align: center;
}

Hope it works perfectly for you now:) . below is the working code.

body {
  margin: 0;
  padding: 0;
  font-family: 'Open Sans', sans-serif;
  font-size: 13px;
  font-weight: 300;
  position: relative;
  background-color: #2D112A;
}

.bgimg {
  width: 100%;
  height: 500px;
  background: url('images/money.jpg') no-repeat center;
  /* Link - https://unsplash.com/collections/597225/money?photo=OCrPJce6GPk */
  background-size: cover;
  position: relative;
}

.main {
  width: 100%;
  height: 550px;
  background: #F5F5F5;
  position: relative;
  padding-top: 6%;
}

.main:before {
  content: '';
  width: 50%;
  height: 100px;
  position: absolute;
  top: -48px;
  left: 0;
  background: #F5F5F5;
  transform: skewY(6deg);
}

.main:after {
  content: '';
  width: 50%;
  height: 100px;
  position: absolute;
  top: -48px;
  right: 0;
  background: #F5F5F5;
  transform: skewY(-6deg);
}

.back-button {
  position: absolute;
  top: 8%;
  left: 3%;
  font-size: 20px;
  background: none;
  color: whitesmoke;
  border: 2px solid whitesmoke;
  border-radius: 10px;
  padding: 13px;
  cursor: pointer;
  text-decoration: none;
}

.back-button i {
  margin-right: 5px;
  font-size: 18px;
}

#container {
  margin: 0 auto;
  height: 530px;
  width: 70%;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

#img-sec {
  width: 50%;
  height: 100%;
  float: left;
}

#summary-sec {
  width: 50%;
  height: 100%;
  float: left;
}

#car-img {
  height: 100%;
  width: 100%;
}

.heading {
  color: whitesmoke;
  margin: 0;
  position: relative;
  font-size: 42px;
  /* left: 45%;*/
  top: 7%;
  font-family: 'Merriweather', serif;
  /*New Css*/
  width: 100%;
  text-align: center;
}
<section class="bgimg">
  <a class="back-button" href="enquiry.html"><i class="fa fa-chevron-left" aria-hidden="true"></i> Back to website</a>
  <h1 class="heading">Payment</h1>
</section>
<div class="main">
  <div id="container">
    <div id="img-sec">
      <img id="car-img" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150">
    </div>
    <div id="summary-sec"><label>BMW - M3<span class="right-text"> 250AUD (per day)</span></label><br><label>Number of days <span class="right-text">X 1</span></label><br><label>Product total: <span class="right-text">250 AUD</span></label><br><label>Insurance Cover<span class="right-text">+50 AUD</span></label><br><label>Sports model<span class="right-text">+100 AUD</span></label><br><label>Snow Insurance Cover<span class="right-text">+0 AUD</span></label><br>
      <hr><label class="grand">Total: <span class="right-text">400 AUD </span></label></div>
  </div>
</div>

Upvotes: 2

Mik
Mik

Reputation: 124

I have a css file called page reset that I've updated over the years, you might wanna have something similar. No matter what page I'm working on, this is core thing that I always use.

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-weight: inherit;
    font-style: inherit;
    font-size: 100%;
    font-family: inherit;
    vertical-align: baseline;
    text-decoration: none;
}
/* remember to define focus styles! */
:focus {
    outline: 0;
}
body {
    line-height: 1;
    color: black;
    background: white;
}
ol, ul {
    list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
    border-collapse: separate;
    border-spacing: 0;
}
caption, th, td {
    text-align: left;
    font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: "";
}
blockquote, q {
    quotes: "" "";
}

Upvotes: 2

Deepak Kumar
Deepak Kumar

Reputation: 221

You can use universal selector and give default margin and padding values as 0px so that there will be no any unwanted margin or padding in the whole webpage.

* {
    margin: 0px;
    padding: 0px;
}

Upvotes: 0

Super User
Super User

Reputation: 9642

Bydefault body tag take some margin. If you set it to 0 then this problem will solve, You can update you CSS with following code

body {
    margin: 0px;
    padding: 0px;
}

Upvotes: 2

Related Questions