Could someone help me to leave a Responsive content?

Question

Well I am creating a vertical one page site, and I wanted to create a standard content to use in all sections of the page ( to be able to leave centralized ) Could someone help me? I was trying to work with %, but it didn’t work out..

The page looks like this:

I wanted to create a div with class content name to leave all the content of the site inside this div with a predefined size ex:

It doesn’t have to be exactly this big if someone can at least help me with an example ..

code :

html, body, .page {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  transition: all .6s ease-out;
  color: #fff;
  overflow: hidden; 
}

* {
  font-family: 'open sans', 'lato', 'helvetica', sans-serif;
}

.page {
  position: absolute;
  transition-delay: 1s;
}

#p1 {
  left: 0;
}

#p2, #p3, #p4, #p5 {
  left: -200%;
}

#p1 { background: darkslateblue; }
#p2 { background: tomato; }
#p3 { background: gold; }
#p4 { background: deeppink; }
#p5 { background: rebeccapurple; }

#t2:target #p2,
#t3:target #p3,
#t4:target #p4,
#t5:target #p5 {
  transform: translateX(200%);
  transition-delay: .2s !important;
}

#t2:target #p1 .icon, 
#t3:target #p1 .icon,
#t4:target #p1 .icon,
#t5:target #p1 .icon {
  -webkit-filter: blur(2px);
}

.icon {
  color: #fff;
  font-size: 18px;
  display: block;
}

ul .icon:hover {
  opacity: 0.5;
}

.page .icon .title {
  line-height: 2;
}




ul {
  background-color: seagreen;
  position: fixed;
  z-index: 1;
  top: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  height: 100%;
  width: 20%;
  padding: 0;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
 }



a {
  text-decoration: none;
}

.title, .hint {
  display: block;
}

.title {
  font-size: 38px;
}

.hint {
  font-size: 13px;
}

#p4 .hint {
  display: inherit !important;
}

.hint a {
  color: yellow;
  transition: all 250ms ease-out;
  -webkit-transition: all 250ms ease-out;
  -moz-transition: all 250ms ease-out;
  -o-transition: all 250ms ease-out;
}

.hint a:hover {
  color: #FFF;
}

.line-trough {
  text-decoration: line-through;
}

.page .icon {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 10%;
  left: 0;
  width: 270px;
  height: 170px;
  margin: auto;
  text-align: center;
  font-size: 80px;
  line-height: 1.3;
  /*transform: translateX(360%);
  -webkit-transform: translateX(360%);
  -moz-transform: translateX(360%);
  -o-transform: translateX(360%);
  transition: all .5s cubic-bezier(.25, 1, .5, 1.25);
  -webkit-transition: all .5s cubic-bezier(.25, 1, .5, 1.25);
  -moz-transition: all .5s cubic-bezier(.25, 1, .5, 1.25);
  -o-transition: all .5s cubic-bezier(.25, 1, .5, 1.25);*/
}

.page#p1 .icon {
  height: 220px;
}

.page#p1 .icon {
  transform: translateX(10%) !important;
}

#t2:target .page#p2 .icon,
#t3:target .page#p3 .icon,
#t4:target .page#p4 .icon,
#t5:target .page#p5 .icon {
  transform: translateX(0) !important;
  -webkit-transform: translateX(0) !important;
  -moz-transform: translateX(0) !important;
  -o-transform: translateX(0) !important;
  transition-delay: 1s;
}



#_opcoes_main{
   font-size: 0;
   display: block;
   width: 100%;
   text-align: center;
   color: #444;
}

._opcoes_div{
   display: inline-block;
   margin: 10px 0;
   vertical-align: top;
   font-size: 18px;
   width: calc(100% / 3.5);
   min-width: 300px;
}

._opcoes_div em{
   color: #2896c8;
   font-size: 1.2em;
   font-weight: bold;
}

._opcoes_div p{
   font-size: .8em;
   font-weight: bold;
   margin: 3px 0;
}

._opcoes_div select{
   border: 1px solid #ddd;
   padding: 10px 15px;
   margin-bottom: 10px;
   width: 200px;
   font-size: .8em;
}

._opcoes_div img{
   height: 120px;
   margin: 70px 0 35px;
}

#_botao_valor{
   font-size: 0;
   border: 2px solid #000;
   margin-top: 20px;
   display: inline-block;
   cursor: pointer;
   padding: 0;
   filter: grayscale(100%);
   transition: all .2s ease-in-out;
}

#_botao_valor:hover{
   filter: grayscale(0%);
}

#_botao_valor div{
   font-size: 18px;
   display: inline-block;
}

#_botao_valor div:nth-child(1){
   font-weight: bold;
   background: #eff2f4;
   padding: 12px;
   border-right: 1px solid #000;
}

#_botao_valor div:nth-child(2){
   font-weight: bold;
   background: green;
   padding: 12px 20px;
   color: #fff;
}


#_errmsg{
   color: #f30;
   font-size: 18px;
   margin-top: 20px;
   display: inline-block;
}

#_botao label{
   font-size: 16px;
}

#_botao label #_email{
   font-size: 18px;
   border: 1px solid #bbb;
   padding: 10px;
   margin: 3px 0 20px;
   width: 270px;
}

#_modal{
   display: none;
   width: 276px;
   padding: 15px;
   background: #090;
   color: #fff;
   text-align: center;
   position: fixed;
   z-index: 99999999999999;
   border: 1px solid #000;
   -webkit-box-shadow: 0px 6px 14px -2px rgba(0,0,0,0.75);
   -moz-box-shadow: 0px 6px 14px -2px rgba(0,0,0,0.75);
   box-shadow: 0px 6px 14px -2px rgba(0,0,0,0.75);
   -webkit-transform:translate(-50%,-50%);-moz-transform:translate(-50%,-50%);transform:translate(-50%,-50%);top:50%;left:50%;
   font-size: 20px;
}

#_modal_fecha{
   position: absolute;
   cursor: pointer;
   background: #000;
   border-radius: 100%;
   padding: 5px;
   top: -15px;
   right: -4px;
   width: 25px;
   height: 25px;
   line-height: 25px;
}

.contentpg{
	width: 1280px;
	top:50%;
}

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento sem título</title>
</head>
	<link rel="stylesheet" href="style/ct.css">
		<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
		  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<body>
	

	<div class="ct" id="t1">
  <div class="ct" id="t2">
    <div class="ct" id="t3">
      <div class="ct" id="t4">
         <div class="ct" id="t5">
          <ul id="menu">
            <a href="#t1">Vitorias/Wins</a>
            <a href="#t2">Elo Boost</a>
            <a href="#t3">Duo Boost</a>
            <a href="#t4">Melhor de 10</a>
  
          </ul>
          <div class="page" id="p1">
         <section ="EloJoob">
			 		<div class="contentpg">
			  <div id="_opcoes_main">
   <form target="_blank" action="elos2.php" id="_form" onsubmit="return valEmail()" method="post">
      <input type="hidden" id="_valortt" name="_valortt" />
      <div class="_opcoes_div">
         <em>1.</em> <strong>Selecione a Liga e Divisão atual</strong>
         <br />
         <img id="img_ligatual" src="img_bronze.jpeg" />
         <br />
         <p>Liga</p>
         <select name="lig_atu" id="lig_atu">
            <option value="bronze">Bronze</option>
            <option value="prata">Prata</option>
            <option value="ouro">Ouro</option>
            <option value="platina">Platina</option>
            <option value="diamante">Diamante</option>
         </select>
         <br />
         <p>Divisão</p>
         <select name="div_atu" id="div_atu">
            <option value="v">V</option>
            <option value="iv">IV</option>
            <option value="iii">III</option>
            <option value="ii">II</option>
            <option value="i">I</option>
         </select>
      </div>
      <div class="_opcoes_div">
         <em>2.</em> <strong>Selecione a Liga e Divisão desejada</strong>
         <br />
         <img id="img_ligades" src="img_bronze.jpeg" />
         <br />
         <p>Liga</p>

         <select name="lig_des" id="lig_des">
            <option value="bronze">Bronze</option>
            <option value="prata">Prata</option>
            <option value="ouro">Ouro</option>
            <option value="platina">Platina</option>
            <option value="diamante">Diamante</option>
         </select>
         <br />
         <p>Divisão</p>
         <select name="div_des" id="div_des">
            <option value="v">V</option>
            <option value="iv">IV</option>
            <option value="iii">III</option>
            <option value="ii">II</option>
            <option value="i">I</option>
         </select>
      </div>
      <div class="_opcoes_div">
         <em>3.</em> <strong>Selecione a Fila desejada</strong>
         <br />
         <img id="img_flex" src="img_soloduo.jpeg" />
         <br />
         <p>Fila</p>
         <select name="_fila" id="_fila">
            <option value="solo/duo">Solo/Duo</option>
            <option value="flex">Flex</option>
         </select>
      </div>
      <br clear="all" />
      <div id="_botao">
         <div id="_errmsg" style="display: none;">Erro</div>
         <div id="_botao_email" style="display: none;">
            <label>
               <strong>E-mail</strong>
               <br />
               <input onkeyup="$('#_botao #_botao_email label strong').html('E-mail').css('color','#444')" required="required" id="_email" name="_email" type="email" placeholder="Insira seu e-mail" />
            </label>
            <br />
            <button type="submit" id="_botao_valor">
               <div>
                  R$ 0,00
               </div>
               <div>
                  ADQUIRIR
               </div>
            </button>
         </div>
      </div>
   </form>
   <div id="_modal">
      Obrigado pela compra!
      <span id="_modal_fecha" onclick="$('#_modal').hide()">X</span>
   </div>
</div>
			 </div>

			  </section> 
          </div>
          <div class="page" id="p2">
            <section class="icon fa fa-keyboard-o"><span class="title">Type</span></section>
          </div>  
          <div class="page" id="p3">
            <section class="icon fa fa-rocket"><span class="title">Rocket</span></section>
          </div>
          <div class="page" id="p4">
            <section class="icon fa fa-dribbble">
              <span class="title">Dribbble</span>
              <p class="hint">
                <a href="https://dribbble.com/albertohartzet" target="_blank">Im ready to play, <span class="hint line-trough">invite me </span> find me</a>
              </p>
              <p class="hint">Already invited by <a href="http://www.dribbble.com/mrpeters" target="_blank">Stan Peters</a></p>
            </section>
          </div> 
          <div class="page" id="p5">
            <section class="icon fa fa-plus-circle">
              <span class="title">More</span>
              <p class="hint">
                <span>You love one page & CSS only stuff? </span><br/>
                <a href="https://codepen.io/hrtzt/details/pgXMYb/" target="_blank">check this pen "Pure CSS One page vertical navigation"</a>
              </p>
            </section>
          </div> 
        </div>
      </div>
    </div>
  </div>
</div>



</body>
</html>

an example : https://codepen.io/lucrovis97/pen/MvOrRJ?depth=everything&order=popularity&page=10&q=portifolio&show_forks=false

Answer 1

John, when you start developing a responsive layout, you need to add the tag responsible for telling the browser that that site is responsive.

I’ll leave some links for you to study and that will help you in this issue of responsive layout.

First read this article, Responsive Design in Practice 2: From Layout to HTML, for it will give you an important foundation before going to the next, Responsive Development and Viewport.