CODEWITHSUNDEEP
htmlcss
Gaurav Thantry
Gaurav Thantry

Reputation: 803

Not able to stop the text from relocating while the browser size is changed

I am trying to build an animalCard webpage. I could stop the frame div from resizing. But how do I stop the text inside the div from relocating. Below are snapshots of my webpage before and after resizing.

Before resizing

After resizing:

Before resizing

I tried searching a lot for this. Tried placing my entire body content in a div to fix the width. Below is my code:

.cardFrame{
  border: solid;
  border-radius: 5%;
  text-align: center;
  margin-left: 30%;
  margin-right: 30%;
  background-color: grey;
  margin-top: 10px;
    position: absolute;
	min-width: 539px;
	box-shadow: 0 0 80px grey;
	

	
}

#imageSize{
  height: 160px;
  width: 160px;
  align-self: center;
  margin-top: 30px;
  /*border: solid rgba(0,0,0,.5);*/
  border-width: thick;
  box-shadow: 0 0 80px black;
}
.infoContent{
  margin-top: 20px;
  position: relative;
  width: 80%;
  display: inline-block;
  border-style:hidden;
  border-radius: 5%;
  background-color: rgb(240,230,140);
    box-shadow: 0 0 80px rgba(240,230,140,.5);


}

.info{
  font-size: 20px;
  width: fixed;
  /*text-shadow: 0 0 30px rgba(0,0,0,.5); */
}

.line{
  margin-left: 5%;
  margin-right: 5%;
}
#if{
  font-size: 25px;
  text-shadow: 0 0 30px rgba(0,0,0,.5);
  
}
#fact{
  font-size: 20px;
}
#factDescription{
  font-size: 12px;
}

.listContent{
  font-style: italic;
  font-weight: bold;
  text-align: left;

  list-style-type: none;
}

#listItems{
  font-size: 30px;
  text-shadow: 0 0 30px rgba(0,0,0,.5);
}
<!DOCTYPE html>
<html>
 <head>
   <meta name="description" content="Animal Card Project">
   <meta name="Author" content="Gaurav Thantry">
   <meta name="keywords" content="html, CSS">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="stylesheet" href="css/stylesheet.css">
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
   <title>AnimalCard</title>
 </head>
 <body>
 <div style="position: absolute, text-align: center">
   <div class="cardFrame">
     <img src="images/burfi.jpg" id="imageSize" alt="my pet's pic">
     <div class="row infoContent" text-align="center">
       <div class="col-md-6 info">
         <p>NAME:</p>
         <p>AGE:</p>
         <p>BREED:</p>
       </div>
       <div class="col-md-6 info">
        <p>Burfi</p>
        <p>2 Yrs</p>
        <p>Pug</p>
       </div>
     </div>
     <hr class="line">
     <p id="if">INTERESTING FACT</p>
     <p id="fact"><em>Pugs are ancient breed</em></p>
     <p id="factDescription">Because the pug lineage stretches so far back, their early history is a little murky. Most believe that the breed originated in China and existed before 400 BCE and were called (or at least closely related to a breed called) "lo-sze." Buddhist monks kept the dogs as pets in Tibetan monasteries.</p>
     <hr class="line">
     <p id="listItems">Things to buy for a pug</p>
     <div class="row">
       <div class="col-md-6">
        <ul class="listContent">
         <li><label>Food and Water Bowl</label></li>
         <li><label>Steam Cleaner</label></li>
         <li><label>Collar and/or Harness</label></li>
         <li><label>Baby/Dog Gate</label></li>
       </ul>
      </div>
      <div class="col-md-6">
         <ul class="listContent">
          <li><label>Walking Leash</label></li>
          <li><label>The Pug T-Shirt</label></li>
          <li><label>Deshedding Brush</label></li>
          <li><label>Treats</label></li>
         </ul>
       </div>
      </div>
      <p text-align="center">Created by @Gaurav Thantry</p>
    </div>
</div>
 </body>
</html>

Upvotes: 0

Views: 34

Answers (2)

SidTheBeard
SidTheBeard

Reputation: 379

You’re using .col-md-6 which makes it two columns only on medium and larger screens. If you always want the key/values to be side by side try using col-xs-6 or col-sm-6. The documentation for the css framework you’re using will have more details on the grid and the classes they use to apply certain widths at certain screen sizes.

For reference on any other Bootstrap related issues, here’s the documentation to the version you’re currently using.

Upvotes: 1

Rocks
Rocks

Reputation: 1155

Just change the col-md-6 on the .info element to col-6. (this is same as col-xs-6). This will make sure there are two columns all devices, from extra-small screen sizes to extra large.
Refer here for more info: https://getbootstrap.com/docs/4.0/layout/grid/#grid-options

Upvotes: 0

Related Questions