Jump to content
Ewfc2005

Transformar site em responsivo

Recommended Posts

Eu sou um programador amador, e ainda estou aprendendo programação, comecei um site, mas esqueci de faze-lo para ser responsivo, agora preciso de ajuda

pois nao consigo deixa-lo responsivo

 


Codigo HTML

Quote

 

<!DOCTYPE html>
  <head>
    <title>Sogo Studio</title>
    <link rel="stylesheet" type="text/css" href="sobre.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
    <meta charset="utf-8">
  </head>
  <body>

<div id="all">
    <ul class="menu">
        <a href="site.html"><img class="img-circle" src="sogostudio.png"></a>
        <li><a href="sobre.html">Sobre</a></li>
        <li><a href="servicos.html">Serviços</a></li>
        <li><a href="nossoTime.html">Nosso Time</a></li>
        <li><a href="contato.html">Contato</a></li>
    </ul>
</div>


    <h1 style="white-space:pre-wrap;">Sobre</h1>

    <hr size="1">

<div class="centralizado">

TEXTO

</div>

 

<div class="footer">
  <p class="local">LOCALIZAÇÂO</p>
</div>

<div class="sub">
  <p>local</p>
</div>


<div class="footer2">
  <p class="horas">HORARIO</p>
</div>

<div class="sub2">
  <p>horas</p>
</div>


<div class="footer3">
  <p class="contato">CONTATO</p>  
</div>

<div class="sub3">
  <p>contato</p>
</div>

 

<div class="footer4">
  <p class="social">SOCIAL</p>  
</div>

 

<a href="https://www.instagram.com/sogostudio/" target="_blank"><i class="fab fa-instagram"></i></a>

<a href="https://www.facebook.com/sogostudioararaquara/" target="_blank"><i class="fab fa-facebook-square"></i></a>


  </body>
</html>

 

 

Codigo CSS


 

Quote

 

html {
  overflow: auto;
}

*{

  margin: 10px;padding: 10px;
  }

body {

    font-family: "Times New Roman",Times,serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.25em;
    letter-spacing: 0em;
    font-family: proxima-nova;
    font-weight: 300;
    font-style: normal;
    font-size: 13px;
    line-height: 2.4em;
    letter-spacing: .065em;
    text-rendering: optimizeLegibility;
  }
a{
  text-decoration: none; color: #000;
  }


ul.menu{
      font-family: "Times New Roman",Times,serif;

    text-align: center; /* centraliza na horizontal */
}
ul.menu li{
    display: inline-block; /* centraliza na horizontal */
    margin: 0 5px;
}

}
ul.menu li a:hover{
    background-color: #8BBADC;
}

.img-circle {
width: 200px;
height: 200px;
border-radius: 50%;
position: absolute;
left: 50px;
top: 0;
}

span {


    font-family: sans-serif;
    line-height: 1.25em;
    letter-spacing: 0em;
    text-transform: none;
    font-weight: 100;
    font-style: normal;
    font-size: 50px;
    line-height: 1.4em;
    letter-spacing: .25em;
    text-transform: uppercase;
    color: #222;
    position: absolute;
    top: 330px;
    left: 450px;

}


.titulo{
  position: absolute;
  background-image: url("servico.jpg");
  height: 125px;
  width: 1328px;
  top: 300px;
  left: -10px;
}

.retangulo{
  position: absolute;
  background-color: white;
  height: 90px;
  width: 330px;
  top: 320px;
  left: 450px;
}

.foto1{
  position: absolute;
  top: 500px;
  left: -20px;
  width: 650px;
  height: 320px;
  background: url("servicos1.jpeg") center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.foto1:hover {
  opacity: 0.8
}

.servico1{
font-family: Arial,sans-serif;

line-height: 1.25em;

letter-spacing: .02em;

font-weight: bold;

font-style: normal;

font-size: 32px;

line-height: 1.2em;

letter-spacing: .5em;

text-transform: uppercase;

position: absolute;
top: 600px;
left: 300px;
background: white;
padding: 20px;
}

.foto2{
  position: absolute;
  top: 900px;
  right: -10px;
  width: 650px;
  height: 320px;
  background: url("servicos2.jpeg") center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.foto2:hover{
  opacity: 0.8
}

.servico2{
font-family: Arial,sans-serif;

font-weight: 400;

line-height: 1.25em;

letter-spacing: .02em;

font-weight: bold;

font-style: normal;

font-size: 32px;

line-height: 1.2em;

letter-spacing: .5em;

text-transform: uppercase;

position: absolute;
top: 1030px;
right: 500px;
background: white;
padding: 20px;
}

.foto3{
  position: absolute;
  top: 1300px;
  left: -20px;
  width: 650px;
  height: 320px;
  background: url("servicos3.jpg") center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.foto3:hover{
  opacity: 0.8
}

.servico3{
font-family: Arial,sans-serif;

line-height: 1.25em;

letter-spacing: .02em;

font-weight: bold;

font-style: normal;

font-size: 32px;

line-height: 1.2em;

letter-spacing: .5em;

text-transform: uppercase;

position: absolute;
top: 1400px;
left: 550px;
background: white;
padding: 20px;
}

.foto4{
  position: absolute;
  top: 1700px;
  right: -10px;
  width: 650px;
  height: 320px;
  background: url("servico4.jpg") center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.foto4:hover{
  opacity: 0.8;
}

.servico4{
font-family: Arial,sans-serif;

font-weight: 400;

line-height: 1.25em;

letter-spacing: .02em;

font-weight: bold;

font-style: normal;

font-size: 32px;

line-height: 1.2em;

letter-spacing: .5em;

text-transform: uppercase;

position: absolute;
top: 1850px;
right: 300px;
background: white;
padding: 20px;
}

.foto5{
  position: absolute;
  top: 2100px;
  left: -10px;
  width: 650px;
  height: 320px;
  background: url("servico5.jpeg") center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.foto5:hover{
  opacity: 0.8;
}

.servico5{
font-family: Arial,sans-serif;

font-weight: 400;

line-height: 1.25em;

letter-spacing: .02em;

font-weight: bold;

font-style: normal;

font-size: 32px;

line-height: 1.2em;

letter-spacing: .5em;

text-transform: uppercase;

position: absolute;
top: 2230px;
left: 300px;
background: white;
padding: 20px;
}

 

.footer:not(.index-item-title) {
  position: absolute;
  left: 200px;
  text-align: center;
  top: 2500px;
  font-size: 10px;
  font-family: Arial,sans-serif;
  font-weight: 400;
  font-size: 24px;
  line-height: 1.25em;
  letter-spacing: 0em;
  text-transform: none;
  font-family: arno-pro;
  font-weight: 700;
  font-style: normal;
  font-size: 9px;
  line-height: 2.1em;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: #222;
}

.footer2{
  position: absolute;
  left: 450px;
  text-align: center;
  top: 2500px;
  font-size: 10px;
  font-family: Arial,sans-serif;
  font-weight: 400;
  font-size: 24px;
  line-height: 1.25em;
  letter-spacing: 0em;
  text-transform: none;
  font-family: arno-pro;
  font-weight: 700;
  font-style: normal;
  font-size: 9px;
  line-height: 2.1em;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: #222;
}

.footer3{
  position: absolute;
  left: 700px;
  text-align: center;
  top: 2500px;
  font-size: 10px;
  font-family: Arial,sans-serif;
  font-weight: 400;
  font-size: 24px;
  line-height: 1.25em;
  letter-spacing: 0em;
  text-transform: none;
  font-family: arno-pro;
  font-weight: 700;
  font-style: normal;
  font-size: 9px;
  line-height: 2.1em;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: #222;
}

.footer4{
  position: absolute;
  left: 950px;
  text-align: center;
  top: 2500px;
  font-size: 10px;
  font-family: Arial,sans-serif;
  font-weight: 400;
  font-size: 24px;
  line-height: 1.25em;
  letter-spacing: 0em;
  text-transform: none;
  font-family: arno-pro;
  font-weight: 700;
  font-style: normal;
  font-size: 9px;
  line-height: 2.1em;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: #222;
}

.sub{
  position: absolute;
  left: 130px;
  text-align: center;
  top: 2530px;
  font-size: 11px;
  font-family: Arial,sans-serif;
  font-size: 19px;
  line-height: 1.25em;
  letter-spacing: 0em;
  font-family: arno-pro;
  font-weight: 400;
  font-style: normal;
  font-size: 13px;
  line-height: 1.2em;
  letter-spacing: .05em;
  text-transform: none;
  color: #222;
}

.sub2{
  position: absolute;
  left: 440px;
  text-align: center;
  top: 2540px;
  font-family: Arial,sans-serif;
  font-size: 19px;
  line-height: 1.25em;
  letter-spacing: 0em;
  font-family: arno-pro;
  font-weight: 400;
  font-style: normal;
  font-size: 13px;
  line-height: 1.2em;
  letter-spacing: .05em;
  text-transform: none;
  color: #222;
}

.sub3{
  position: absolute;
  left: 690px;
  text-align: center;
  top: 2540px;
  font-family: Arial,sans-serif;
  font-size: 19px;
  line-height: 1.25em;
  letter-spacing: 0em;
  font-family: arno-pro;
  font-weight: 400;
  font-style: normal;
  font-size: 13px;
  line-height: 1.2em;
  letter-spacing: .05em;
  text-transform: none;
  color: #222;
}

.fa-facebook-square{
  position: absolute;
  top: 2560px;
  right: 310px;
  font-size: 20px;
}

.fa-instagram{
  position: absolute;
  top: 2560px;
  right: 270px;
  font-size: 20px;
}

.fab:hover {
  opacity: 0.7;
}

@-webkit-keyframes fadeIn {
0% { opacity: 0; }
100% { opacity: 1; }
}
@-moz-keyframes fadeIn {
0% { opacity: 0;}
100% { opacity: 1; }
}
@-o-keyframes fadeIn {
0% { opacity: 0; }
100% { opacity: 1; }
}
@keyframes fadeIn {
0% { opacity: 0; }
100% { opacity: 1; }
}

.fadeIn {
-webkit-animation: fadeIn 3s ease-in-out;
-moz-animation: fadeIn 3s ease-in-out;
-o-animation: fadeIn 3s ease-in-out;
animation: fadeIn 3s ease-in-out;
}

 

 

Ele está mal feito, ainda tenho que arrumar muita coisa, se alguem conseguir me ajudar e dizer como ele pode ficar responsivo

eu Agradeço.

Share this post


Link to post
Share on other sites

Mude o font-size de px para %.

Exemplo:

 

// Seu código

body {

    font-family: "Times New Roman",Times,serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.25em;
    letter-spacing: 0em;
    font-family: proxima-nova;
    font-weight: 300;
    font-style: normal;
    font-size: 13px;
    line-height: 2.4em;
    letter-spacing: .065em;
    text-rendering: optimizeLegibility;
  }

Seu código acima tem dois font-size (font-size: 16px  e font-size: 13px). Não vejo necessidade em ter dois.

 

Não sou bom em sites responsivos, mas o que tu pode fazer é tirar um font-size, e depois trocar o px por % assim:

body {

    font-family: "Times New Roman",Times,serif;
    font-weight: 400;
    font-size: 120%;
    line-height: 1.25em;
    letter-spacing: 0em;
    font-family: proxima-nova;
    font-weight: 300;
    font-style: normal;
    line-height: 2.4em;
    letter-spacing: .065em;
    text-rendering: optimizeLegibility;
  }

 

Resultado no computador:

forum_css.thumb.png.11b4fe13608b7eeb013fec8d3d4ca693.png

 

Possível resultado em um dispositivo mobile:

forum_css2.png.dbcd0b10ddb55d5bc5707294fc0f40a4.png

 

Troque os px das imagens e demais textos. Talvez o resultado te agrade, ou não.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By Dallas20
      Então pessoal,  estou fazendo um pequeno projeto para me aperfeiçoar em javascript e acabei me deparando com o seguinte problema. Eu queria pegar o valor de um input quando o usuário desse um click em um botão e isso foi simples de fazer, porém ao utilizar conceitos de POO e aplicando classes no javascript não consigo fazer essa ação. Gostaria de saber se isso é possível? E como fazer?
       
      Segue o code HTML:
      <!DOCTYPE html> <html> <head> <meta charset="UTF-8"/> <meta name="author" content="Dallas"> <meta http-equiv="refresh" content="1"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="../CSS/withdrawal.css" rel="stylesheet"> <script src="../javascript/withdrawal.js"></script> <title>Banco do Brasil</title> </head> <body> <h1>Quanto deseja sacar ?</h1> <input type="number" id="cashInReal"> <button type="button" onclick="alter()"> AQUI</button> </body> </html> code javascript:
      class withdrawal { alter() { alert(document.getElementById('cashInReal').value); } } Desde já muito obrigado.
       
      Att. Dallas
    • By vinihhylian0103
      Olá, Boa Noite.
      Estou usando o Iframe pra exibir meu form de login na minha página central, porém, quando eu clico no botão login, o profile parece somente no iframe, teria como eu fazer o profile ser redirecionado  na página principal.
       
      Segue o código:
        <div class="modal fade" id="modalLRFormDemo2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">     <div class="modal-dialog cascading-modal" role="document">       <!--Content-->       <div class="modal-content">                            <iframe marginwidth="50" height="500px" width="500px" src="CADASTROS_LOGINS\LOGIN\index.html"> Seu navegador não suporta frames )= </iframe>                 <center><button type="button" class="btn btn-outline-info waves-effect ml-auto" data-dismiss="modal">Fechar</button></center>                 <br>               </div>             </div>             <!--/.Panel 8-->           </div>         </div>       </div>  
    • By Anderson Maciel
      Boa tarde pessoal,

      Estou quebrando a cabeça para resolver um problema, tenho uma div dinâmica que carrega uma <table> em uma das colunas deveria apresentar o componente Switchery, esta <table> é montada a partir de uma função PHP que faz o select em uma tabela do banco de dados conforme abaixo:
       
      echo '<table class="table table-hover"> <thead> <tr> <th>Nome</th> <th>Agrupamento</th> <th>Ativo</th> </tr> </thead> <tbody>'; foreach($data as $row) { If ($row['ativo'] == 1) { $vativochk = "checked"; } else { $vativochk = ""; } echo '<tr> <td>'.$row['nome'].'</td> <td>'.$row['agrupamento'].'</td> <td><input type="checkbox" name="ativo_grid" class="js-switch" '.$vativochk.' disabled="disabled"></td> </tr>'; } echo '</tbody> </table>'; Aqui está o Ajax que chama e retorna atualizando a DIV:
       
      function atualiza_grid_graficos() { $.ajax({ type: "POST", url: "hubfuncind.php", data: { id_tabindicadores_paineis: $('#id_tabindicadores_paineis').val(), acao: "gridgraficos" }, success: function(data) { $('#conteudo').html(data); } }); } O retorno vem certinho, mas apenas o componente Switchery está vindo desconfigurado, ou seja vem um checkbox normal (html).

      O que é mais incrível é que neste mesmo formulário mais acima tenho este mesmo componente funcionando normalmente, somente dentro da DIV dinâmica é que fica desconfigurado conforme imagem anexa.

      Será que alguém já passou por isso?

    • By Pitag346
      Olá pessoal, tudo bem? 
      Estou com uma dúvida bem bobinha... mas gostaria que me ajudassem a solucionar.
       
      Alguns sites utilizam uma forma de carregar as imagens deixando elas embaçadas/desfocadas. Até que são carregadas e elas aparecerem normalmente...
       
      Exemplo básico seria esse site: https://www.redbull.com/br-pt/athletes
       
      Sabem me explicar como isso é feito, e pra que ? Meu site usa bastante imagens, gostaria de saber se tem algum benefício ou se seria somente estética ... Obrigado! 
       
      (Não sei se isso é feito em JavaScript, acredito que sim... perdão se publiquei na área errada).
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.