How do I turn a site that is already ready into responsive? In the two codes below is just a page of the site to take as an example

Asked

Viewed 60 times

-4

* {
    margin: 0;
    padding: 0;
}

body {
    background-image: url("imagens/imgfundo.jpg");
    background-attachment: fixed;
    width: 100%;
}

header {
    width: 100%;
    background-color: rgb(202, 212, 238);
}

.foto1 {
    position: absolute;
    top: 5px;
    left: -200px;
    width: 23%;
}

#header {
    margin: auto;
    position: relative;
    height: 225px;
    width: 940px;
}

#titulo {
    display: inline-block;
    font-family: New Century Schoolbook, TeX Gyre Schola, serif;
    color: #1552a7;
    text-align: center;
    font-size: 80px;
    position: absolute;
    top: 67px;
    left: 260px;
}

#slogan {
    display: inline-block;
    font-family: New Century Schoolbook, TeX Gyre Schola, serif;
    color: #010914;
    text-align: center;
    font-size: 20px;
    position: absolute;
    top: 160px;
    left: 340px;
}

.navegacao {
    position: relative;
    margin: 0 auto;
    width: 940px;
}

nav {
    position: absolute;
    top: 55px;
    right: -250px;
}

nav li {
    list-style-type: none;
}

nav a {
    font-family: New Century Schoolbook, TeX Gyre Schola, serif;
    font-size: 25px;
    color: #1552a7;
    text-decoration: none;
}

nav a:hover {
    color: #0199FF;
}

.sobre {
    width: 1250px;
    height: 1650px;
    margin: 0 auto;
}

footer {
    width: 100%;
    background-color:rgb(202, 212, 238);
}

#footer {
    margin: auto;
    position: relative;
    height: 225px;
    width: 820px;
}

h1 {
    font-family: Trebuchet MS, sans-serif;
    padding-top: 50px;
    font-size: 44px;
    text-align: left;
    color: #1552a7;
}

.textomain {
    font-family: Trebuchet MS, sans-serif;
    text-align: justify;
    font-size: 34px;
    padding-top: 50px;
    font-weight: bold;
    padding: 50px 25px 0px 25px;
}

.pfooter {
    padding-top: 200px;
    text-align: center;
    text-decoration: underline;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bolder;
}

.foto {
    position: absolute;
    top: 40px;
    left: 342px;
    width: 17%;
}
<!DOCTYPE html>
<html lang="pt-br">

<head>
    <meta charset="UTF-8">
    <title>Plast Golden - Home</title>
    <link rel="shortcut icon" href="imagens/logo.png" type="image/x-png" />
    <link rel="stylesheet" type="text/css" href="homecss.css" />
</head>
<body>
    <header>
        <div id="header">
            <img class="foto1" src="imagens/Logo.png">
            <h1>
                <p id="titulo">Plast Golden</p>
                <p id="slogan">26 anos de tradição & qualidade</p>
            </h1>
            <nav>
                <ul>
                    <h6>
                        <li><a href="home.html">Home</a></li>
                        <li><a href="produtos.html">Produtos</a></li>
                        <li><a href="outros produtos.html">Outros Produtos</a></li>
                        <li><a href="contato.html">Contato/Informações</a></li>
                    </h6>
                </ul>
            </nav>
        </div>
    </header>

    <main>
        <div class="sobre">
            <h1>
                <br>
                <p>Quem somos?</p>
            </h1>
            <p class="textomain">A Plast Golden é uma empresa que atua no ramo de plásticos e embalagens industriais e engenharia, com experiência comercial de mais de 26 anos.</p>
            </p>
            <h1>
                <br>
                <br>
                <br>
                <p>Qual é o nosso objetivo com os clientes?</p>
            </h1>
            <p class="textomain">Nossa missão é proporcionar aos nossos clientes total satisfação e agilidade em suprir suas necessidades com excelência, ultrapassando suas expectativas em relação ao prazo de entrega, garantia do produto e rapidez em seu atendimento.</p>
            <h1>
                <br>
                <br>
                <br>
                <p>Como nos contatar e comprar conosco?</p>
            </h1>
            <p class="textomain">Caso se interessar, para obter mais informações sobre os nossos produtos, sobre os preços, e entre outras diversas informações relacionadas a Plast Golden, basta ir até o menu localizado no canto superior direito da tela e clicar em Contato/Informações, nesta aba se localizam os nossos telefones e e-mails para contato, além do nosso endereço e outras informações.</p>
        </p>
        </div>
    </main>

    <footer>
        <div id="footer">
            <img class="foto" src="imagens/Logo preto.png">
            <p class="pfooter">© 2021 - Plast Golden | All Rights Reserved. Desenvolvido por Gabriel Rogato Spurio</p>
        </div>
    </footer>
</body>
</html>

html css mobile responsive-layout responsive

  • Friend doing a search in Media Queries, might help you.https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/CSS_Media_queries

  • See how to use a css framework to help you how Tailwindcss

2 answers

0

Your question has become very broad, next time try to be more specific. But I’ll still try to at least give you an idea of where to start.

As most of your code is measured in absolute terms px ideal is that you use media queries, the code below for example indicates that your #header should be wide 90% on screens smaller than 600px.

@media (max-width: 600px){
    
#header{
    margin: auto;
    position: relative;
    height: 225px;
    width: **90%**;
    }
    
}

It seems to me that you are beginner in the subject, if that is the case I recommend you study media queries then try to study flexbox and grid layout.

-1

I did some testing with google dev tools, as I don’t know the responsive design you want I just changed what I considered could be more responsive.

nav{    
   position :absolute;
   top: 25%;
   right: -20%;}

A good responsive practice is to use percentage in css instead of pixels.

Browser other questions tagged html css mobile responsive-layout responsive

You are not signed in. Login or sign up in order to post.