Solucionado
@media screen and (min-width: 768px) {
.institucional__contato-email {
display: inline-block;
}
.institucional__video {
width: 100%;
}
}Meu vídeo fica com toda a largura da tela como um viewport. Não há diferença entre width: 100%; ou width: 100vw; O que pode ser? Esta faltando alguma padding na section?
A solução que eu encontrei para ficar mais próximo do que era desejado foi width: 90%, mas queria entender o que eu posso ter deixado passar.
hoje, com a Alura e o Google Gemini
Oi Jaqueline! Fiz um teste aqui, mas não sei se aplicando ao seu cenário vai dar certo, pois outras propriedades do seu CSS podem influenciar no resultado final.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
padding: 0;
margin: 0;
}
@media screen and (min-width: 768px) {
.institucional__contato-email {
display: inline-block;
}
.institucional__video {
width: -webkit-available;
width: -moz-available;
width: available;
padding: 30px;
}
}
</style>
</head>
<body>
<div class="institucional__video">
<iframe width="100%" height="315" src="https://www.youtube.com/embed/qqJ-PDZNmpo" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</body>
</html>Veja se dá certo no seu contexto.
olá! é uma alteração facil,basta não colocar o simbolo % em width,ok?
@media screen and (min-width: 768px) { .institucional__contato-email { display: inline-block; }
.institucional__video {
width: 100;
}}
Nenhuma dessas respostas deu certo. Vou continuar com a minha versão de 'width: 90%' e baixar o projeto dado ao fim do curso pelo professor para dar uma inspecionada. Valeu pessoal!