Olá a todos! Gostaria de saber a forma mais correta para adaptar esta página para a resolução do meu monitor que é de 2560X1080. Conforme mostra a imagem abaixo, foi criado um espaço enorme no canto direito causado pela resolução da minha tela; percebe-se também que a div está visualmente maior. Obs.: Cheguei a alterar algumas propriedades e também criei um arquivo reset.css na tentativa de corrigir este problema, porém não obtive êxito.
Olá, Rosilene.
Tudo bem?
Tenta colocar um width: 100%; na classe .container, acho que deve resolver.
Se não resolver, compartilha os seu códigos HTML e CSS aqui com a gente por favor. Eu acho que era para estar ocupando a tela toda já, mas temos que analisar.
Sigo aguardando. Valeu Rosilene.
Olá, Renan! Por aqui tudo bem, obrigada! Então... eu já havia feito isso, (colocando width em 100%) mas infelizmente não corrigiu o problemas. Segue o meu código.
<!DOCTYPE html>
<html lang="pt-br">
<head>
<title>Alura Plus</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.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=Inter:wght@400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="reset.css">
</head>
<body>
<section class="container principal">
<div class="container__caixa">
<h1 class="container__titulo">Com o Combo+, você pode aproveitar a Alura+ e o Alura Língua por um preço único.</h1>
<img src="img/Combo.png" alt="O combo+ é a junção do alura+ e o alura língua" class="container__imagem">
<a href="www.alura.com.br" class="container__botao">Assine por 12x de R$ 120,00*</a>
<a href="www.alura.com.br" class="container__botao botao_secundario">Assinar somente o Alura+</a>
<p class="container__aviso">*O preço pode variar caso a assinatura seja feita em outros planos.</p>
</div>
</section>
</body>
</html>CSS
:root {
--branco-principal: #FFFFFF;
--cinza-secundario: #C0C0C0;
--botao-azul: #167BF7;
--cor-de-fundo: #00030C;
--fonte-principal: 'Inter';
}
body {
background-color: var(--cor-de-fundo);
color: var(--branco-principal);
font-family: var(--fonte-principal);
font-size: 16px;
font-weight: 400;
}
* {
margin: 0;
padding: 0;
}
.principal {
background-image: url("img/Background.png");
background-repeat: no-repeat;
background-size: contain;
align-items: center;
text-align: center;
}
.container {
height: 100vh;
display: grid;
grid-template-columns: 50% 50%;
}
.container__botao {
background-color: var(--botao-azul);
border-radius: 5px;
padding: 1em;
color: var(--branco-principal);
display: block;
text-decoration: none;
margin-bottom: 1em;
}
.botao_secundario {
background-color: transparent;
border: 2px solid var(--branco-principal);
}
.container__aviso {
font-size: 12px;
color: var(--cinza-secundario);
}
.container__titulo {
font-size: 28px;
font-weight: 700;
}
.container__imagem {
margin: 1em 0 2em 0;
}
.container__caixa {
margin: 0 6em;
}Tente centralizar mais o conteúdo e aumentar o tamanho da imagem, você pode fazer isso na classe .principal que é onde está o background dessa imagem maior, por um margin: 0 auto; e definir um tamanho para a imagem ficar maior.
Tenta ai e me fala. Por favor.
Você pode tentar determinar uma resolução mínima e máxima para a tela também, e colocar todos os seus estilos do CSS dentro dessa resolução:
@media screen and (min-width: 330px) and (max-width: 2560px){
CÓDIGO CSS COMPLETO AQUI
}nesse caso vai aplicar seus estilos para uma tela de no mínimo 330px e no máximo 2560, dá para você ir testando até encontrar a ideal.
Então, Renan... ambos não funcionaram, porém quando mudei o background-size: contain da classe .principal para background-size: 100% e logo em seguida acrescentando na classe .container__caixa as propreidades: text-align: center mais a margin: 0 16em; e no .container__imagem a margin: 5em 0 5em 0; apresentou este resultado:
Tentei ir adiante com o código acima, mas outros problemas surgiram, deixando os elementos da página com espaçamentos um pouco diferentes em relação a página original.
Refiz o código deixando exatamente como a instrutora mostrou na aula. Desta vez alterei o tamanho da imagem redimensionando-a para 1950x 680 . Salvando o código percebi que a imagem perdeu um pouco de sua qualidade e que ainda há diferenças nos espaçamentos se comparados com os da página original .
