Seguindo a aula, criei um projeto diferente 'Pagina de Receitas' mas usei todo o conteúdo ensinado no curso. Na parte final, tornando responsivo, a Home eu consegui adequar para a tela 450px, usando o mesmo código no que toca o footer, .caixa e a nav, o codigo deu erro, nao ficou responsivo, oq estaria acontecendo? Segue o projeto: Erro no codigo da tela Receitas e Contato no codigo da @media
https://github.com/giselegarcia/pagina_de_receitas.git
Olá Gisele. Alguns elementos com largura definida maior que 480px não estavam dentro de @media. Fiz os ajustes no css, código abaixo:
body {
background-color: #ffffff;
font-family: 'Montserrat', sans-serif;
}
header {
background-color: #ffffff;
padding: 20px 0;
}
h1 {
position: relative;
margin: 0 0 0 0px;
}
h2 {
margin: 30px 30px 30px 25px;
font-size: 25px;
text-transform: uppercase;
font-weight: bold;
}
.caixa {
position: relative;
width: 940px;
margin: 0 auto;
}
nav {
position: absolute;
top: 110px;
right: 50px;
}
nav li {
display: inline-block;
margin: 0 0 0 15px;
}
nav a {
text-transform: uppercase;
color: #000000;
font-weight: bold;
font-size: 25px;
text-decoration: none;
}
nav a:hover {
color: #e68405;
text-decoration: underline;
font-size: 28px;
}
nav a:active {
color: rgb(187, 52, 11)
}
#img {
width: 50%;
border-radius: 3%;
margin-left: 50%;
display: inline-block;
}
.principal {
position: relative;
width: 940px;
margin: 0 auto;
padding: 100px;
}
.principal p {
width: 940px;
margin-top: 60px;
padding: 100px;
text-align: center, justify;
font-size: 30px;
font-weight: bold;
color: #4e420c;
padding: 15px;
}
.principal h2 {
position: absolute;
top: 150px;
right: 0px;
left: 0px;
text-transform: uppercase;
padding: 30px;
font-size: 40px;
color: darkorange;
display: inline-block;
font-weight: bold
}
.instrucoes {
width: 940px;
margin: 20px auto;
padding: 50px;
border: 5px solid #f5dab8;
background: #ece2d5;
}
.titulocentralizado {
text-align: center;
font-size: 30px;
font-weight: bold;
color: #29240e;
padding: 30px;
}
.itens {
font-size: 25px;
color: black;
padding: 15px;
font-size: 25px;
text-align: justify;
}
.imgpreparo {
width: 500px;
border-radius: 5%;
margin: 30px 0 0 200px;
}
.video {
width: 560px;
margin: 1em auto;
}
footer {
text-align: center;
padding: 20px 0;
background: url("fundo.jpg");
font-weight: bold;
margin-top: 150px;
}
.copyright {
color: #000000;
text-align: center;
font-size: 18px;
font-weight: bold;
}
.img {
width: 5%;
}
@media screen and (max-width: 480px) {
.caixa,
.titulocentralizado,
.principal, .principal p,
.imgpreparo,
.instrucoes,
footer, .video {
width: auto;
}
h1 {
text-align: center;
width: 100%;
}
nav {
position: static;
margin: 15px 0px 0 15px;
}
iframe{
width: 100% !important;
}
}Também foi preciso adaptar o iframe que estava com a largura na própria tag.