CODEWITHSUNDEEP
htmlcss
McDuck4
McDuck4

Reputation: 662

Setting viewport or optimize code

I have a problem here, than I often run into. I have this small landingpage:

Small Landingpage

When I look at the following viewports:

the form is not fitting.Is that because of bad coding, or is it just like this? Which means that there always will be some editing regarding viewports?

@import url(https://fonts.googleapis.com/css?family=Questrial);
 html,
body {
  height: 100%;
  background: center no-repeat fixed url('../images/bg_1.jpg');
  background-size: cover;
  color: #444;
  font-family: 'Questrial', sans-serif;
}
@media (min-width: 768px) {
  h1 {
    font-size: 68px;
  }
}
a {
  color: #999;
}
a:hover {
  color: #111;
}
.catchy-text-wrapper {
  width: 100%;
  text-align: center;
}
#catchyText {
  background-color: red;
  padding: 20px;
  background: rgba(32, 63, 86, 0.8);
  display: inline-block;
}
#emailNews {
  font-size: 20px;
}
/* Round corners on button */

.btn,
.well,
.panel {
  border-radius: 0;
}
.btn-blue {
  background: rgba(32, 63, 86, 1.0);
  border-color: #5491bd;
  border-radius: 10px;
  color: #fff;
}
.btn-huge {
  padding: 17px 22px;
  font-size: 22px;
}
section {
  padding-top: 70px;
  padding-bottom: 50px;
  min-height: 100%;
  min-height: calc(100% - 0);
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
}
#section1 {
  background-color: rgba(0, 0, 0, 0.6);
  color: #fff;
}
/* Form Config */

input {
  font-size: 16px;
  min-height: 40px;
  border-radius: 25px;
  line-height: 20px;
  padding: 15px 30px 16px;
  border: 1px solid #b9b9af;
  margin-bottom: 10px;
  background-color: #fff;
  opacity: 0.9;
  -webkit-transition: background-color 0.2s;
  transition: background-color 0.2s;
}
.subscribe-input {
  float: center;
  width: 23%;
  height: 5px;
  text-align: left;
  margin-right: 2px;
}
.btn-placing {
  padding-top: 20px;
  "

}
@media screen and (max-width: 767px) {
  .subscribe-input {
    width: 100%;
  }
}
<section class="container-fluid" id="section1">
  <div class="v-center">
    <h1 class="text-center">COMPANY NAME</h1>
    <h2 class="text-center">Change this <b>subline</b> here</h2>
    <div class="catchy-text-wrapper">
      <h2 class="text-center" id="catchyText">A CATCHY PIECE OF TEXT</h2>
    </div>
    <br>
    <p class="text-center"><i id="emailNews">Enter your email for more news</i>
    </p>
  </div>
  <div class="catchy-text-wrapper">
    <form role="form" action="register.php" method="post" enctype="plain">
      <input type="email" name="email" class="subscribe-input" placeholder="Enter your e-mail address..." required>
    </form>
  </div>
  <p class="text-center btn-placing">
    <a href="#" class="btn btn-blue btn-lg btn-huge lato" data-toggle="modal" data-target="#myModal">Give me the news</a>
  </p>

</section>

Upvotes: 0

Views: 46

Answers (1)

henry
henry

Reputation: 4385

Your <input> is displaying at its default box-sizing: content-box, which means that when your

@media screen and (max-width: 767px) {
  .subscribe-input {
    width: 100%;
  }
}

is applied, the content box is getting sized to 100%. Padding is outside the content box, so when you add in the

input {
  padding: 15px 30px 16px;
}

your <input> is 60px wider than its container.

Get around this by adding box-sizing: border-box to your input's styles.

Upvotes: 3

Related Questions