CODEWITHSUNDEEP
csshtml
user8210258
user8210258

Reputation:

Responsive errors

I'm currently developing a landing page. I noticed that the word "Welcome" stretches to the right half, instead of remaining in the left half, when I reduce the size of the browser. Here's my code below: https://jsfiddle.net/8k6ry9ay/

.leftHalf {
  background: url(images/bg-1.jpg);
  width: 50%;
  position: absolute;
  left: 0px;
  height: 100%;
}

.rightHalf {
  background-image: url(images/test1.jpg);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  width: 50%;
  position: absolute;
  right: 0px;
  height: 100%;
}

.header {
  font-family: 'Open Sans', sans-serif;
  font-weight: 700;
  letter-spacing: .14em;
  color: #333;
  font-style: normal;
  font-size: 120px;
  text-transform: uppercase;
}

.header2 {
  font-family: 'Open Sans', sans-serif;
  font-weight: 700;
  font-style: normal;
  text-transform: none;
  letter-spacing: 0em;
  line-height: 1em;
  color: #333;
  padding-right: 30px;
  padding-bottom: 50px;
  padding-left: 50px;
}

.display {
  display: inline-block;
  font-size: 69px;
}
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/bootstrap-theme.css">
<link href='http://fonts.googleapis.com/css?
    family=Open+Sans:300italic,600italic,400,300,600,700' rel='stylesheet' type='text/css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
</script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<script src="js/bootstrap.min.js"></script>

<body>
  <div class="rightHalf"></div>
  <div class="leftHalf">
    <h1></h1>
  </div>
  <br>
  <br>
  <div class="leftHalf">
    <h1 class="header">&nbsp;welcome</h1>
    <br>
    <br>
    <h1 class="  header2 text-align-center" style="display:inline-block; font-size:40px">
      Please choose from the selections below
    </h1>
  </div>
</body>

Thanks mate. Please forgive my English

Upvotes: 0

Views: 72

Answers (1)

Wordica
Wordica

Reputation: 2595

 <h1 class="header">&nbsp;welcome</h1>

Remove 

&nbsp;

from h1.

And if You want to have this word responsive then use media query to change font size for different width. For example:

@media screen and (min-width: 400px) and (max-width: 900px){

    .header{
        font-size:20px !important;
    }
}

EDITED:

@media screen and (min-width: 1200px) and (max-width: 2500px){

}

@media screen and (min-width: 992px) and (max-width:1199px){

}

@media screen and (min-width: 768px) and (max-width: 991px){
 //tablets
}

@media screen and (min-width: 300px) and (max-width: 767px){

 //mobiles 
}

and sometimes other can also help:

   @media screen and (min-width: 280px) and (max-width: 500px){

   }

Upvotes: 1

Related Questions