Solucionado (ver solução)
Solucionado
(ver solução)
14
respostas

Não consigo deixar formulário responsivo

Olá!

Por gentileza, estou tentando deixar o formulário responsivo, conforme pedido pelo instrutor. A página de produtos já consegui, mas o formulário, não.

Seguem abaixo o CSS e o HTML:

HTML

https://pastebin.com/DHkmAD5N

CSS

body {
    font-family: 'Montserrat', sans-serif;
}

header {
    background: #BBBBBB;
    padding: 20px 0;
}

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

nav {
    position: absolute;
    top: 110px;
    right: 0;
}

nav li {
    display: inline;
    margin: 0 0 0 15px;
}

nav a {
    text-transform: uppercase;
    color: #000000;
    font-weight: bold;
    font-size: 22px;
    text-decoration: none;
}

nav a:hover {
    color: #C78C19;
    text-decoration: underline;
}

.produtos {
    width: 940px;
    margin: 0 auto;
    padding: 50px 0;
}

.produtos li {
    display: inline-block;
    text-align: center;
    width: 30%;
    vertical-align: top;
    margin: 0 1.5%;
    padding: 30px 20px;
    box-sizing: border-box;
    border: 2px solid #000000;
    border-radius: 10px;
}

.produtos li:hover {
    border-color: #C78C19;
}

.produtos li:active {
    border-color: #088C19;    
}

.produtos li:hover h2 {
    font-size: 34px;
}

.produtos h2 {
    font-size: 30px;
    font-weight: bold;
}

.produto-descricao {
    font-size: 18px;
}

.produto-preco {
    font-size: 22px;
    font-weight: bold;
    margin-top: 10px;
}

footer {
    text-align: center;
    background: url("bg.jpg");
    padding: 40px 0;
}

.copyright {
    color: #FFFFFF;
    font-size: 13px;
    margin: 20px 0 0;
}

form {
    margin: 40px 0;
}

form label, form legend {
    display:block;
    font-size: 20px;
    margin: 0 0 10px;
}

.input-padrao {
    display: block;
    margin: 0 0 20px;
    padding: 10px 25px;
    width: 50%;
}

.checkbox {
    margin: 20px 0;
}

.enviar {
    width:40%;
    padding: 15px 0;
    background: orange;
    color: white;
    font-weight: bold;
    font-size: 18px;
    border: none;
    border-radius: 5px;
    transition: 1s all;
    cursor: pointer;
}

.enviar:hover {
    background: darkorange;
    transform: scale(1.2);
}

table {
    margin: 20px 0 40px;
}

thead {
    background: #555555;
    color: white;
    font-weight: bold;
}

td, th {
    border: 1px solid #000000;
    padding: 8px 15px;
}

/* CSS da página inicial */
.banner {
    width: 100%;
}

.titulo-principal {
    text-align: center;
    font-size: 2em;
    margin: 0 0 1em;
    clear: left;    
}

.principal {
    padding: 3em 0;
    background: #FEFEFE;
    width: 940px;
    margin: 0 auto;
}

.principal p {
    margin: 0 0 1em;
}

.principal strong {
    font-weight: bold;
}

.principal em {
    font-style: italic;
}

.utensilios {
    width: 120px;
    float: left;
    margin: 0 20px 20px 0;
    opacity: 0.7;
    transition: 400ms;
    box-shadow: 10px 10px 10px 0 #000000;
}

.utensilios:hover {
    opacity: 1;
}

.imagem-beneficios:hover {
    opacity: 1;
}

.mapa {
    padding: 3em 0;
    background: linear-gradient(#FEFEFE, #888888);
}

.mapa-conteudo {
    width: 940px;
    margin: 0 auto;
}

.mapa p {
    margin: 0 0 2em;
    text-align: center;
}

.beneficios {
    padding: 3em 0;
    background: #888888;
}

.conteudo-beneficios {
    width: 640px;
    margin: 0 auto;
}

.lista-beneficios {
    width: 40%;
    display: inline-block;
    vertical-align: top;
}

.itens {
    line-height: 1.5;
}

.itens:before {
    content: "Estrela removida ";
}

.itens:first-child {
    font-weight: bold;
}

.imagem-beneficios {
    width: 60%;
    opacity: 0.7;
    transition: 400ms;
    box-shadow: 10px 10px 10px 0 #000000;
}

.imagem-beneficios:hover {
    opacity: 1;
}

.video {
    width: 560px;
    margin: 2em auto;
}

@media screen and (max-width: 480px) {
    .caixa, .principal, .conteudo-beneficios, .mapa-conteudo, .video, .produtos, .produtos li {
        width: auto;
    }

    h1 {
        text-align: center;
    }

    nav {
        position: static;
    }

    .lista-beneficios, .imagem-beneficios {
        width: 100%;
    }

    form {
        width: auto;
    }
}

Grato desde já.

14 respostas

Fala ai Marcos, tudo bem? Não sei como deveria ser o resultado final, mas, acho que falta alguns ajustes na sua media query.

Por exemplo:

form,
input {
    width: 100%;
}

Deixar o formulário e campos ocuparem a largura toda a página.

Espero ter ajudado.

Oi Matheus, bom dia. Tudo bem, e você?

Então, mas se tento adicionar isso na media query, o VsCode aponta um erro, em vermelho. Estou inserindo assim:

@media screen and (max-width: 480px) {
    .caixa, .principal, .conteudo-beneficios, .mapa-conteudo, .video, .produtos, .produtos li {
        width: auto;
        form, input 
        width: 100%;
    }

É que o instrutor não falou nada sobre isso. Está errado?

Fala Marcos, nesse caso o form e input devem fazer parte do seletor e não parte das propriedades, ficaria assim:

.caixa, .principal, .conteudo-beneficios, .mapa-conteudo, .video, .produtos, .produtos li {
    width: auto;
}

form, input {
    width: 100%;
}

Espero ter ajudado.

Oi Matheus, obrigado.

Mas então, continua do mesmo jeito, infelizmente. :(

Segue screenshot:

https://prnt.sc/111irdn

Obrigado, mais uma vez. :)

olá, basicamente o form e input devem fazer parte do seletor, ok?

Isso. Mas continua do mesmo jeito. :(

Utilizei a classe do formulário, e apliquei o width: 100%.

Fala Marcos, por algum motivo seu form ainda não deve estar ocupando a largura toda.

Compartilha o projeto completo comigo, assim eu consigo simular o problema por aqui e analisá-lo com mais calma.

Pode compartilhar através do Github ou Google Drive (zipado).

Fico no aguardo.

Olá Matheus,

Desculpe pela demora.

Segue o link:

https://1drv.ms/u/s!AlWfPW5PcipovXgT4oz9IcI-p4AC?e=tXjKn1

Assim que baixar, se puder me dar um toque, agradeço muito. :)

solução!

Fala Marcos, dei uma olhada no projeto, o motivo dos campos não ficarem ocupando a largura toda é porque você tem um CSS mais especifico que sua media query, dessa forma ele vai aplicar os estilos mais especificos que no caso seria 50% de largura.

Tente adicionar isso:

form,
input,
.input-padrao {
    width: 100%;
}

Agora o .input-padrao também tem um media query para ele.

Espero ter ajudado.

Oi Matheus, obrigado. Bom dia. Agora foi. :)

No caso, o trecho "problemático" era esse abaixo, né?

.input-padrao {
    display: block;
    margin: 0 0 20px;
    padding: 10px 25px;
    width: 50%;

Abraços!

Fala Marcos, isso ai, esse trecho por utilizar um seletor de classe .input-padrao era mais especifico do que o seletor por tag input que estava definida na sua media query.

Espero ter ajudado.

Com certeza ajudou. Muito obrigado, Matheus!

Abraços!

Magina Marcos, sempre que precisar não deixe de criar suas duvidas.

Abraços e bons estudos.