Transformar site em responsivo

Ewfc2005 · Julho 17, 2019

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.

winterjeferson · Julho 17, 2019

dê uma lida sobre media queries:

https://developer.mozilla.org/pt-BR/docs/Web/Guide/CSS/CSS_Media_queries

Megao · Julho 20, 2019

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:

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.

Ewfc2005 · Julho 20, 2019

Muito Obrigado! Vou tentar fazer isso

Entrar

Arquivado

Transformar site em responsivo

Recommended Posts

Ewfc2005 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

winterjeferson 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Megao 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Ewfc2005 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

PHP+Codeigniter - Adicionar Registro Plano de Contas

Javascript - Passar Parâmetros para uma Função.

PHP - Consulta MySql para prazo de dias

Conteúdo Similar

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante