Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

[Bug] Tamanho da viewport

Olá, meu projeto esta com um problema com relação ao tamanho da minha tela de notebook. Onde no caso, a media querie do projeto para tablets de 834px está sendo aplicada para a minha tela de notebook que possui 1366 x 768 px. E verifico que na documentação oficial da W3School, tablets possuem 768px-992px de largura e desktops 992px-1200px. Sendo assim, gostaria de saber o posso fazer para dar continuidade no desenvolvimento do layout para viewports de desktop no projeto. E se, alterar algumas configurações pré-estabelecidas do css seria uma forma de resolver, aplicando essas media querie da documentação oficial. Segue imagem do meu desenvolvimento de layout para desktop onde notei o "bug". Imagem do site que deveria estar na versão desktop pelo tamanho da tela, mas está na versão tablet

1 resposta
solução!

Olá Felipe, tudo bem contigo?

Parece que você está enfrentando um problema em relação ao tamanho da tela do seu notebook e a aplicação incorreta da media query no seu projeto. Com base nas informações que você forneceu, parece que a media query para tablets está sendo aplicada erroneamente à sua tela de notebook.

A documentação oficial da W3Schools que você mencionou indica que tablets geralmente possuem uma largura de 768px a 992px, enquanto desktops têm uma largura de 992px a 1200px. No entanto, é importante lembrar que essas faixas podem variar e não são estritamente definidas. Além disso, as especificações de tela e resoluções podem variar entre diferentes dispositivos.

Se você está desenvolvendo o layout para desktop e está enfrentando problemas de exibição em um notebook com tela de 1366 x 768 px, uma possível solução é ajustar as media queries para atender às suas necessidades específicas. Você pode criar uma media query personalizada para a largura da tela do seu notebook, por exemplo:

@media screen and (min-width: 1201px) {
  /* Estilos para a versão desktop */
}

Dessa forma, você pode definir estilos específicos para a versão desktop do seu layout quando a largura da tela for maior que 1200px, como indicado na documentação da W3Schools.

No entanto, lembre-se de que é importante considerar a responsividade do seu design em diferentes dispositivos e não apenas se basear em resoluções específicas. Você pode testar e ajustar as media queries em diferentes dispositivos e navegadores para garantir que o layout se adapte corretamente.

Além disso, certifique-se de verificar se não há outras causas para o problema que você está enfrentando, como erros de código ou conflitos em estilos existentes.

Ademais caso você julgue que realmente pode haver um erro então eu peço que você me mande o seu código para que eu possa analisar a aplicação das media queries, pois o que pode estar acontecendo é que você pode ter colocado uma forma errada de chamar as media queries, pois dependo da forma que você escreve elas, elas podem gerar um o efeito completamente contrário.

Espero que isso ajude a resolver o problema e permita que você continue o desenvolvimento do seu layout para a versão desktop do projeto!

Caso precise eu estarei aqui!

Abraços e bons estudos.