0

Meu site não está ficando responsivo

#HTML #CSS
Fernando Rodrigues
Fernando Rodrigues

Boa tarde, tudo bem? Ficaria extremamente grato se alguém puder me ajudar.


Eu estou praticamente concluindo o desafio de recriar a página de login do Instagram no bootcamp de HTML Web Developer. Já fiz todo o esqueleto em HTML e deixei o site com a aparência que eu desejava através do CSS; porém, na hora de torná-lo responsivo para dispositivos mobile ele não está funcionando, não fazendo as alterações de acordo com o tamanho da tela do dispositivo.


Já verifiquei as divs e possíveis erros de digitação, mas não achei a causa.


Segue o link do repositório no GitHub:

https://github.com/OEscriba/desafio-rolegram


Grato pela atenção!

0
4

Comentários (6)

0
Fernando Rodrigues

Fernando Rodrigues

22/05/2021 13:54

Boa tarde, Wallace. Muitíssimo obrigado! Acrescentei a tag e o problema foi resolvido. Vou te agradecer no meu README também :D

2
Wallace Pereira

Wallace Pereira

21/05/2021 21:12

Fala Fernado, blz?


O seu problema é em relação ao HTML, você não declarou a "meta name viewport", no código, ela é responsável de controlar o layout em navegadores móveis.(link:https://developer.mozilla.org/en-US/docs/Web/HTML/Viewport_meta_tag)


SEU CÓDIGO:


<!DOCTYPE html>

<html lang="pt-br">

    <head>

        <meta charset="UTF-8">

        <title>RoleGram - Login</title>

        <link rel="stylesheet" href="style.css">

    </head>




SEU CÓDIGO COM "META NAME VIEWPORT":


<!DOCTYPE html>

<html lang="pt-br">

    <head>

        <meta charset="UTF-8">

        <title>RoleGram - Login</title>

        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <link rel="stylesheet" href="style.css">

    </head>




Inclua somente essa tag, é o seu problema estará resolvido.


Espero ter ajudado, valeu!👍💻

0
Fernando Rodrigues

Fernando Rodrigues

21/05/2021 18:12

Boa noite, Alexsander. Agradeço a atenção. Infelizmente, adicionei o ; mas ele continua sem ficar responsivo :/

0
A

Alexander Silva

21/05/2021 17:54

Acredito que a falta de ponto e virgula no fim da linha 128 do seu CSS deve estar comprometendo a renderização dos elementos que aparecem na sequência.


  background-image: url('img/googleplay-button.png')
0
Fernando Rodrigues

Fernando Rodrigues

21/05/2021 17:47

Boa tarde, Maxsuel. Agradeço a atenção. Mas no caso esta condição aqui já não seria o suficiente? É a mesma do curso.

0
Maxsuel Santos

Maxsuel Santos

21/05/2021 17:30

Olá, pelo que eu olhei mais condições para o css, exemplo :


@media (max-width: "tamanho de um dispositovo movel") {

/* Seu código aqui.

}

None

Brasil