CODEWITHSUNDEEP
javascripthtmlcss
BugaDroid
BugaDroid

Reputation: 31

Make text inside divs responsive in different resolutions

Im working on a project that contains a few divs with text inside and this is maybe a basic error/thing to fix or to do but im not finding how to do it.

The site on a free host so you can see it all: http://tstsite.co.nf/ the site will not run properly only with the html/css.

When i resize the window the text on the buttons and on the triangles on each side will overstay and be outside the div, how can i fix this ?

html, body {
    height: 100%;
}

body {
    position: relative;
}

#anim {
  position: relative;
  height: 100%;
  min-height: 100%;
  background-image: url("http://i.imgur.com/rxks29H.jpg");
  background-image: no-repeat;
  background-size: cover;
}

#anim img {
  position: relative;
  height: 100%;
  width: 100%;
}

 @font-face 
 { 
	font-family: 'big';
	src: url("../font/font.otf"); 
} 

.barra-cima {
	position: absolute;
	top:0;
	width: 100%;
	height: 20%;
}

.logo {
	margin-left: 4%;
	margin-top:4%;
	top: 0;
	position: absolute;
	width: 8%;
	height: 10%;
}

.login {
	margin-right: 4%;
	margin-top:4%;
	top: 0;
	position:absolute;
	right: 0;
	width: 6%;
	height: 8%;
}

.meio-pag1 {
	position: absolute;
	top: 0;
	margin-left: 25%;
	margin-right: 25%;
	width: 50%;
	height: 98%;
}

.tittle-meio {
	font-size: 60px;
	color: white;
	text-align: center;
	margin-left:7%;
	width: 90%;
	height: 30%;
	margin-top: 30%;
	font-family: big;
}

.holder {
	position:absolute;
	bottom: 17%;
	width: 50%;
	margin-left: 25%;
	margin-right: 25%;
}

.botoes-pag1 {
	height: 20%;
	width: 100%;
}

.btn_submit_form {
	width: auto;
    height: 45px;
	color: red;
    font-size: 14px!important;
}

.what_we_do {
	background-color: white;
}

.btn {
	bottom: 0;
	width: 49%;
    padding: 6px 12px;
    margin-bottom: 0;
    font-weight: 200;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;
	 font-family: 'big';
}

.hide {
    display: none;
}


.triangulo-esquerda {
  padding: 5% 15px;
  font-family: 'big';
  font-size: 23px;
  text-transform: uppercase;
  position: absolute;
  width: 14%;
  left: 0;
  z-index: 3;
  top: 32%;
   cursor: pointer;
}

.triangulo-esquerda h2 {
	font-size: 23px;
	font-family: 'big';
	top: 20px;
}

.conteudo-esquerda {
	background-image: url("../img/f2.png");
    background-size: 100%;
	background-repeat: no-repeat;
	background-origin:content-box;
	padding-top: 70px;
	padding-left: 75px;
	padding-right:75px;
	padding-bottom: 50px;
	height: 600px;
    left: -500px;
    padding-top: 210px;
    position: absolute;
    top: -200px;
    width: 500px;
}

.conteudo-esquerda p {
	font-size: 10px;
	font-family: 'big';
}

.conteudo-direita {
	background-image: url("../img/f1.png");
    background-size: 100%;
	background-repeat: no-repeat;
	background-origin:content-box;
	padding-left: 75px;
	padding-right:75px;
	padding-bottom: 50px;
	text-align: right;
	 right: -500px;
    height: 600px;
    padding-top: 210px;
    position: absolute;
    top: -200px;
    width: 500px;
}

.triangulo-direita {
	font-family: 'big';
  font-size: 23px;
	 padding: 5% 15px;
  text-transform: uppercase;
  position: absolute;
  width: 14%;
  right: 0;
  z-index: 3;
  top: 32%;
    cursor: pointer;
}

.triangulo-direita h2 {
	text-align: right;
	font-size: 20px;
	font-family: 'big';
	top: 20px;
}

.conteudo-direita p {
	font-size: 10px;
	font-family: 'big';
}
 <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title> TST </title>
	
    <!-- Bootstrap -->
	<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
	<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <link href="css/bootstrap.min.css" rel="stylesheet">
	<link href="css/font-awesome.css" rel="stylesheet">
	<link href="css/font-awesome.min.css" rel="stylesheet">
	<link href="css/main.css" rel="stylesheet">
	<script src="js/js.js"></script>
	
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
  
   
<section id="anim">
  <img src="img/branquinho.png">
  
 
<div class ="logo">
	<img src="img/logo.png">
</div>
<div class ="login">
	<img src="img/login.png" class="image right">
</div>
  

  
  <div class ="meio-pag1">
	<div class ="tittle-meio">
			 IDEAS TURN INTO SUCESS	
	</div>
	
		<div class="holder">
			<button type="button" class="btn what what_we_do btn_submit_form" value="Open"> SUBMIT IDEA</button>
			<button type="button" class="btn what what_we_do btn_submit_form" value="Open"> JOIN OUR FUND</button>
		</div>
	</div>
  
      <div class="triangulo-esquerda">
		<span style="color: white">SCOUTING FOR COMPANIES</span>	
		<div class ="conteudo-esquerda" class="hide">
			<h2>SCOUTING <span style="color: red">INOVATION</span> FOR YOUR <span style="color: red">BUSINESS </span></h2>
			<br>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing
			elit, sed do eiusmod tempor incididunt ut labore et
			dolore magna aliqua. Ut enim ad minim veniam, quis
			nostrud exercitation ullamco laboris nisi ut aliquip ex
			ea commodo consequat. Duis aute irure dolor.</p>
			<button type="button" class="btn2 what what_we_do btn_submit_form" value="Open"> SUBMIT IDEA </button>
		</div>
	  </div>
 
      <div class="triangulo-direita">
		<span style="color: white"> SEEKING FOR IDEAS </span>
			<div class ="conteudo-direita" class="hide">
				<h2> <span style="color: blue">IDEAS</span> IN DISRUPTIVE <span style="color: blue">IDEAS</span> ! HAVE ANY ? </h2>
			<br>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing
			elit, sed do eiusmod tempor incididunt ut labore et
			dolore magna aliqua. Ut enim ad minim veniam, quis
			nostrud exercitation ullamco laboris nisi ut aliquip ex
			ea commodo consequat. Duis aute irure dolor.</p>
			<input type="submit" class="btn2 what what_we_do btn_submit_form" value="Open">
			</div>
	  </div>
	  
</section>

 </body>
</html>

Upvotes: 0

Views: 70

Answers (1)

Rickert
Rickert

Reputation: 1675

add this in your head:

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

and use mediaqueries:

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

}

With the example above you can add different styles that overrides the default when your screen is smaller

Upvotes: 1

Related Questions