Responsivo com ploblema!

31 de março de 2022 4 respostas Resolvido

geovane10 31 de março de 2022

Oi bom dia eu tentei fazer um site responsivo mais ele quando eu coloco na tela toda ele não preenche a mesma!

<div class="lightbox-wrapper"><a class="lightbox" href="/uploads/3X/9/a/9acaf5dcde05ed875d74d98af8a5692742498025.png.webp" data-download-href="/uploads/default/9acaf5dcde05ed875d74d98af8a5692742498025" title="Captura de tela 2022-03-31 125107"><img src="/uploads/3X/9/a/9acaf5dcde05ed875d74d98af8a5692742498025.png.webp" alt="Captura de tela 2022-03-31 125107" data-base62-sha1="m5mn0wpmjttBlprzDvOpY60lWBL" width="690" height="387" srcset="/uploads/3X/9/a/9acaf5dcde05ed875d74d98af8a5692742498025.png.webp, /uploads/3X/9/a/9acaf5dcde05ed875d74d98af8a5692742498025.png.webp 1.5x, /uploads/3X/9/a/9acaf5dcde05ed875d74d98af8a5692742498025.png.webp 2x" data-small-upload="/uploads/3X/9/a/9acaf5dcde05ed875d74d98af8a5692742498025.png.webp"><div class="meta">
<svg class="fa d-icon d-icon-far-image svg-icon" aria-hidden="true"><use href="#far-image"></use></svg>Captura de tela 2022-03-31 1251071366×768 85.2 KB<svg class="fa d-icon d-icon-discourse-expand svg-icon" aria-hidden="true"><use href="#discourse-expand"></use></svg>
</div></a></div><div class="lightbox-wrapper"><a class="lightbox" href="/uploads/3X/9/8/98e0a36eadf6c372fc2c645b4a1ceb43e8fba682.png.webp" data-download-href="/uploads/default/98e0a36eadf6c372fc2c645b4a1ceb43e8fba682" title="comercio-eletronico"><img src="/uploads/3X/9/8/98e0a36eadf6c372fc2c645b4a1ceb43e8fba682.png.webp" alt="comercio-eletronico" data-base62-sha1="lOpRnYILd6xfjdNCNeCxjPgV4yu" width="500" height="500" srcset="/uploads/3X/9/8/98e0a36eadf6c372fc2c645b4a1ceb43e8fba682.png.webp, /uploads/3X/9/8/98e0a36eadf6c372fc2c645b4a1ceb43e8fba682.png.webp 1.5x, /uploads/3X/9/8/98e0a36eadf6c372fc2c645b4a1ceb43e8fba682.png.webp 2x" data-small-upload="/uploads/3X/9/8/98e0a36eadf6c372fc2c645b4a1ceb43e8fba682.png.webp"><div class="meta">
<svg class="fa d-icon d-icon-far-image svg-icon" aria-hidden="true"><use href="#far-image"></use></svg>comercio-eletronico512×512 40.1 KB<svg class="fa d-icon d-icon-discourse-expand svg-icon" aria-hidden="true"><use href="#discourse-expand"></use></svg>
</div></a></div>

<a class="attachment" href="/uploads/short-url/3hEFxWcy4yY1v632FemGF3T5rzs.html">index.html</a> (590,Bytes)

<a class="attachment" href="/uploads/short-url/7TUxmykJZMoJnyMB5cswEv3uhR8.css">normalize.css</a> (6,8,KB)

<a class="attachment" href="/uploads/short-url/cyWYpMKlulPC4Qs4XdMWogymdbd.css">style.css</a> (359,Bytes)

<!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.0">
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="normalize.css">
    <title>site teste</title>
</head>

<body>
    <header>
        <h1 class="logo">
            <img class="foto-logo " src="comercio-eletronico.png" alt="">
        </h1>
        <nav>


            <a href="">menu</a>

        </nav>

    </header>
</body>

</html>

header {
    background-color: #9eadab;
    position: fixed;
    align-items: center;
    display: flex;
    border-bottom: 1px solid black;
}

a {
    text-decoration: none;
    color: black;
    margin-left: 13%;
    margin-right: 19px;
    margin-bottom: 39%;
    font-size: 19px;
}

.foto-logo {
    width: 24%;
    margin-left: 19%;
}

4 Respostas

wldomiciano 31 de mar. de 2022

Como <header> é um elemento de bloco, ele deveria ocupar 100% da largura, mas como vc usou position:fixed ele se comporta diferente e sua largura depende do seu conteúdo.

Se quiser continuar com position:fixed basta colocar um width:100%.

Mas eu acho que vc deveria usar position:sticky ao invés de fixed.

geovane10 31 de mar. de 2022

Aqui eu mudei o que você falou mais ai o menu não vai procanto da tela olha só que estranho!

<!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.0">
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="normalize.css">
    <title>site teste</title>
</head>

<body>
    <header>
        <h1 class="logo">
            <img class="foto-logo " src="comercio-eletronico.png" alt="">
        </h1>
        <nav>


            <a href="">menu</a>

        </nav>

    </header>
</body>

</html>

header {
    background-color: #9eadab;
    position: sticky;
    align-items: center;
    width: 100%;
    display: flex;
    border-bottom: 1px solid black;
}

a {
    text-decoration: none;
    color: black;
    margin-left: 0%;
    margin-right: 1em;
    margin-bottom: 39%;
    font-size: 19px;
}

.foto-logo {
    width: 24%;
    margin-left: 11%;
    margin-top: 0%;
    margin-bottom: 0%;

Solucao aceita

wldomiciano 31 de mar. de 2022

Vc quer que a imagem fique colada no canto esquerdo e o menu colado no canto direito?

Se for isso mesmo, não estranho, é o comportamento normal. Se quiser que cada um fique colado num canto vc precisa especificar isso.

Como <header> é flex, vc pode usar o justify-content:space-between para isso.

header {
  background-color: #9eadab;
  position: sticky;
  display: flex;
  border-bottom: 1px solid black;
  justify-content: space-between;
}

Obs.: Quando vc usa position:sticky não precisa do width:100%.

geovane10 31 de mar. de 2022 1 like

Agora entendi deu certo, obrigado cara!

Criado 31 de março de 2022

Ultima resposta 31 de mar. de 2022

Respostas 4

Participantes 2

4 Respostas

Topicos relacionados