Todos os elementos que eu insiro via HTML ficam pequenos na visualização Iphone 12 Pro do chrome, não está igual ao apresentado na aula, a principio foram apenas as imagens, mas qualquer texto inserido fica minusculo. Alguém poderia me ajudar?
Solucionado
Todos os elementos que eu insiro via HTML ficam pequenos na visualização Iphone 12 Pro do chrome, não está igual ao apresentado na aula, a principio foram apenas as imagens, mas qualquer texto inserido fica minusculo. Alguém poderia me ajudar?
Oi Alessandro, tudo bem?
Precisamos ver seu código para que possamos te ajudar. Você pode colar seu código aqui, usando a ferramenta de inserir bloco de código ou colocá-los no GitHub:
E também mandar um print de como está a sua visualização.
Muito obrigada.
Um abraço e bons estudos.
<head>
<meta charset="UTF-8">
<meta name="import" content="width=device-width, initial-scale=1.0">
<title>AluraBooks</title>
<link rel="stylesheet" href=".//assets/css/reset.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css" />
<link rel="stylesheet" href=".//assets/css/style.css">
</head>
<body>
.
.
.
<section class="banner">
<h2 class="banner__titulo">Já sabe por onde começar?</h2>
<p class="banner__texto">Encontre em nossa estante o que precisa para seu desenvolvimento!</p>
<input type="search" class="banner__pesquisa" placeholder="Qual será sua próxima leitura?">
</section>
.
.
.Acima está meu html até o trecho do banner.
Abaixo está meu código css do style e banner
@import url("../css/header.css");
@import url("../css/banner.css");
@import url("../css/carrosel.css");
@import url("../css/topicos.css");
@import url("../css/contato.css");
@import url("../css/rodape.css");
:root {
--cor-de-fundo: #EBECEE;
--branco: #FFFFFF;
--laranja: #EB9B00;
--azul-degrade: linear-gradient(97.54deg, #002F52 35.49%, #326589 165.37%);
--fonte-principal: "Poppins";
--azul: #002F52;
--font-secundaria: "josefin Sans";
--preto: #000000;
--cinza: #474646;
--cinza-claro: #858585;
}
body {
background-color: var(--cor-de-fundo);
font-family: var(--fonte-principal);
font-size: 16px;
font-weight: 400;
}.banner {
background: var(--azul-degrade);
color: var(--branco);
text-align: center;
padding: 2.5em 2em;
}
.banner__titulo {
font-size: 18px;
font-weight: 700;
}
.banner__texto {
font-weight: 500;
margin: 1em 0;
}
.banner__pesquisa {
background-color: transparent;
border: 1px solid var(--branco);
color: var(--branco);
border-radius: 24px;
padding: 0.7em;
width: 100%;
}
.banner__pesquisa::placeholder {
font-family: var(--fonte-principal);
font-weight: 400;
font-size: 14px;
text-align: center;
color: var(--branco);
background: url(../img/Lupa.svg);
background-repeat: no-repeat;
background-position: 1em;
}
@media screen and (min-width: 1024px) {
.banner__titulo{
font-size: 36px;
}
.banner__pesquisa {
width: 50%;
}
.banner__pesquisa::placeholder {
background-position: 7em;
}
}
@media screen and (min-width: 1728px) {
.banner__pesquisa {
width: 35%;
}
.banner__pesquisa::placeholder {
background-position: 10em;
}
.banner {
padding: 6em 0;
}
}Eu não consegui subir o print de como está a minha visualização, por esse motivo subi o arquivo no drive https://drive.google.com/file/d/1dg9wRQX0zD8DLhNMUz4gYt2e3R1qJecb/view?usp=sharing
Eu não alterei os tamanhos, mesmo assim os icones da logo por exemplo fica bem pequeno, o que não está parecendo com o video apresentado
Oi Alessandro, tudo bem?
Pelo o que você mandou o que vi de diferente e pode estar fazendo isso com seu código é:
Sua meta tag está assim: <meta name="import" content="width=device-width, initial-scale=1.0">, o correto é viewport assim: <meta name="viewport" content="width=device-width, initial-scale=1.0">
Veja como ficou no iPhone 12:
Um abraço e bons estudos.