Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
6
respostas

Responsividade

por Lucas Melo Pessoa
| 47.4k xp | 6 posts

Olá Prezados Bom Dia,

Estou com uma certa dificuldade em questão na responsividade para telas de tablet. Poderia me ajudar por favor ? Este projeto não se trata de uma atividade de vcs! É apenas uma projeto ficticio meu mesmo! Estou com uma certa dificuldade em questão na responsividade para telas de tablet. Poderia me ajudar por favor ? Este projeto não se trata de uma atividade de vcs! É apenas uma projeto ficticio meu mesmo! Abaixo segue os código CSS junto a imagens

(https://cdn1.gnarususercontent.com.br/1/1419795/c6765564-d1b8-4adf-b1cd-9409c398d463.png)(https://cdn1.gnarususercontent.com.br/1/1419795/e398468d-691f-43c4-bb0f-dcdb9254fbe5.png) 

body{
    height: 100%;
    margin: 0;
}
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif;
}
.Corpo{
    background-color: rgba(105, 105, 105, 1); 
}
header{
    padding: 20px 0;
}
.Menu{
    padding-top: 0px;
    width: 100%;
    text-align: left;
    font-size: 20px;
}
.Menu a{
    color: white;
    text-decoration: none;
    font-weight: bold;
    margin-left: 15px;
    background-color: dodgerblue;
    padding: 10px;
}
.Titulo{
    text-align: center;
    font-size: 30px;
    padding: 30px;
    color: white;
}
.texto__jogo{
    padding: 10%;
    color: white;
    font-size: 20px;
    display: inline-block;
    justify-content: space-between;
}
.imagem__amostra{
    width: 20%;
    height: 20%;       
    border-radius: 15px;
    padding-top: 5%;
    justify-content: space-between;
    margin: 0px 15% 0px 0px;
    float: right;
}
.imagem__amostra2{
    width: 20%;
    height: 20%;       
    border-radius: 15px;
    padding-top: 5%;
    justify-content: space-between;
    margin: 0px 0px 0px 10%;
    float: left;
}
header {
    display: flex;
    justify-content: center;
    padding-top: 5%;
}
.menu {
    display: flex;
    align-items: left;
} 
.titulo__jogo {
    margin-right: 10px;
}
.texto__jogo2{
    background-color: white;
    color: rgb(105, 105, 105, 1);
    border-radius: 5px;
    padding: 10px;
    margin-top: 15px;
    border-radius: 5px;
    width: 100%;
    align-items: center;
    border: none;
    float: left;
    justify-content: space-between;
    font-size: 15px;
} 
.Iniciar__jogo {
    color: white;
    text-decoration: none;
    border-radius: 5px;
    padding: 10px;
    margin-top: 15px;
    width: 100%;
    border: none;
    float: right;
    justify-content: space-between;
    background-color: dodgerblue;
    text-align: center;
    font-size: 15px;
}
@media screen and (max-width: 414px){
    .Menu{
        padding-top: 15px;
        width: 100%;
        text-align: left;
        font-size: 15px;
    }
    .imagem__amostra{
        width: 50%;
        height: 50%;       
        border-radius: 15px;
        padding-top: 5%;
        margin: 0px 25% 0px 0px;
        float: right;
    }
    .imagem__amostra2{
        width: 50%;
        height: 50%;       
        border-radius: 15px;
        padding-top: 5%;
        justify-content: space-between;
        margin: 0px 0px 0px 25%;
        float: left;
    }
    header {
        display: inline-block;
        justify-content: center;
        padding-top: 5%;
    }
    .texto__jogo2{
        justify-content: space-between;
        font-size: 10px;
        margin-left: 83px;
    } 
    .Iniciar__jogo {
        color: white;
        text-decoration: none;
        border-radius: 5px;
        padding: 10px;
        margin-top: 15px;
        width: 100%;
        margin-left: 40%;
        border: none;
        background-color: dodgerblue;
        text-align: center;
        font-size: 10px;
    }
}
@media screen and (max-width: 375px){
    .texto__jogo2{
        margin-left: 67px;
    } 
}
@media screen and (max-width: 320px){
    .texto__jogo2{
        margin-left: 43px;
    } 
}
6 respostas
por Renan Cezar Wuicik
| 3167.3k xp | 6165 posts

Olá Lucas, bom dia! Tudo ok contigo?

Entendo que você está com dificuldades em relação à responsividade para telas de tablet em seu projeto fictício. Vou te ajudar com isso!

Ao analisar o código CSS que você compartilhou, percebo que você já está utilizando media queries para definir estilos específicos para diferentes tamanhos de tela. Isso é um bom começo!

Além disso, sugiro que você utilize unidades de medida relativas, como porcentagem ou em, em vez de unidades fixas, como pixels, para definir as dimensões das imagens e outros elementos. Isso ajudará a garantir que eles se ajustem corretamente em diferentes tamanhos de tela.

Por exemplo, em vez de usar width: 20% e height: 20% para as classes .imagem__amostra e .imagem__amostra2, você pode experimentar algo como width: 50% e height: auto. Isso fará com que as imagens ocupem metade da largura disponível e a altura seja ajustada proporcionalmente.

Contudo, somente com o CSS eu não vou estar conseguindo lhe ajudar de forma muito mais assertiva, eu precisaria dos seus arquivos de imagens, o HTML e os arquivos CSS se forem mais de um, eu peço isso para que eu possa testar tudo por aqui e reproduzir seu ambiente de desenvolvimento do meu lado para que eu possa entender sua situação e como lhe ajudar melhor.

Para partilha de códigos eu recomendo o GitHub, caso você precise de ajuda para usá-lo, assista essa aula aqui, onde a instrutora Mônica Mazzochi Hillman ensina como exportar um projeto para o GitHub, sem precisar usar Git Contudo é importante lembrar que exportar um projeto para o GitHub sem utilizar o Git pode ser muito limitante, visto que em alguns casos projetos com muitos arquivos e com muitos megabytes de informação não são exportados completamente utilizando o método passado no link que disponibilizei, então pode ser que isso não funcione para o seu projeto tá.

E se você não tem uma conta no GitHub, aprenda a criar uma aqui.

E O ALGO MUITO IMPORTANTE QUE EU QUASE ESQUECI, você precisa me explicar melhor como você deseja que o seu projeto fique ao final, se conseguir alguma imagem ou alguma referência para mim entender como você deseja que o site fique ajuda muito também, pois por não se tratar de um projeto de algum curso nosso, eu não tenho ideia de como você deseja que ele fique, então se possível me explique com calma como quer que eu lhe ajude na adaptação do estilo do site.

No geral era isso tá.

Aguardo sua resposta para que eu possa te auxiliar da melhor forma possível! Abraços e bons estudos.
por Lucas Melo Pessoa
| 47.4k xp | 6 posts

Olá Renan todo blz sim!

Sobre essa sugestão ".imagem__amostra e .imagem__amostra2, você pode experimentar algo como width: 50% e height: auto" que vc me proporcionou, eu testei aqui e não deu certo! Vou estar encaminhando meu HTML e as imagens pra vc ter uma base melhor! foto 1Na foto acima é como deve ficar, porém ele está ficando igual a imagem abaixo!

foto 2Meu HTML:

<!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">
        <link rel="stylesheet" type="text/css" href="./CSS/estilo2.css">
        <title>Objetivo do Jogo</title>
    </head>

    <body class="Corpo">
        
        <header>
            
            <div class="Menu">
                <a class="voltar" href="jogo1.html">Voltar</a>
            </div>
        
        </header>
        
        <div class="informacoes">
            <h1 class="Titulo">Objetivo do Jogo</h1>
            <p class="texto__jogo">
                Regra-1:<br>
                <br>
                O objetivo do jogo é tentar acertar o numero que o computador vai jogar<br>
                de 0 a 10, no exemplo ao lado temos o bloco do jogo com as caracteris-<br>
                tica de: inserir o numero, o botão jogar ira exercer com que o computa-<br> 
                dor irá desferir um numero, e o botão jogar novamente para fazer com <br>
                que o jogo seja reiniciado caso seu numero seja incorreto.
            </p>
            <img class="imagem__amostra" src="IMG/Captura de Tela 2023-03-15 às 07.43.44.png" alt="Quadro do jogo">
            <p class="texto__jogo">
                Regra-2:<br>
                <br>
                Se você acertar o número que o computador vai jogar e os números forem <br>
                iguais, irá mostrar uma mensagem "Você Ganhou. Parabéns!" como mostra<br> 
                a imagem ao lado. Eo jogo se encerrará mas se quiser continuar a joga-<br>
                tina, basta clicar no botão "Jogar Novamente".
            </p>
            <img class="imagem__amostra2" src="IMG/Captura de Tela 2023-03-15 às 07.53.56.png" alt="Quadro do jogo">
            <p class="texto__jogo">
                Regra-3:<br>
                <br>
                Após no maximo 3 tentativas e você não conseguiu acertar o número <br>
                que o computador iria jogar, aparecera a seguinte mensagem "Suas <br>
                tentativas acabaram. O numero era 5" como mostra a imagem ao lado.<br>
                E o jogo se encerrará, mas vc pode esta jogando novamente basta<br>
                clicar no botão "Jogar Novamente". E ai vamos nessa?<br>
                Tente acerta o número que o computador vai jogar.
            </p>
            <img class="imagem__amostra" src="IMG/Captura de Tela 2023-03-15 às 07.51.02.png" alt="Quadro do jogo">

            <header class="Menu__link2">
                <div class="menu">
                  <div class="titulo__jogo">
                    <p class="texto__jogo2">Acerte o número se for capaz</p>
                  </div>
                  <div class="jogar-jogo">
                    <a class="Iniciar__jogo" href="jogo3.html">Jogar agora</a>
                  </div>
                </div>
            </header>     

        </div>
    </body>
</html>

Fico no aguardo de sua resposta.

por Renan Cezar Wuicik
| 3167.3k xp | 6165 posts

Olá Lucas, tudo bem?

Peço desculpas pela demora, mas aqui estão as mudanças que devem ser feitas para resolver sue problema com o estilo, e eu adicionei algumas coisinhas para melhorar uma coisinha aqui e ali.

Se tiver dúvida a respeito de algo durante a leitura, é só perguntar.

Aqui o tutorial:

  1. Primeiro englobe os textos e imagens dentro de div´s e dê uma classe para elas. Eu escolhi esse nome: container-jogo, um exemplo seria isso:
        <div class="container-jogo">
            <p class="texto__jogo">
                Regra-1:<br>
                <br>
                <!-- Resto do texto -->
            </p>
            <img class="imagem__amostra" src="IMG/Captura de Tela 2023-03-15 às 07.43.44.png" alt="Quadro do jogo">
        </div>
  2. Depois, na seção da segunda regra, aquele contêiner que estará com a imagem antes do texto, copie a tag da imagem e coloque antes da tag de paragrafo, nós vamos fazer algumas alterações para melhorar a manutenção depois, deixe algo assim Ah e também adicione uma segunda classe na tag de texto isso será útil mais adiante, o nome que escolhi para a segunda classe foi "texto-2":
        <img class="imagem__amostra2" src="IMG/Captura de Tela 2023-03-15 às 07.53.56.png" alt="Quadro do jogo">
            <p class="texto__jogo texto-2">
                Regra-2:<br>
                <br>
                <!-- Resto do texto -->
            </p>
  3. Agora no arquivo de estilo CSS você deve colocar a classe .container-jogo e colocar os seguintes estilos para ela:
        .container-jogo {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
  4. Agora na classe .texto__jogo adicione a propriedade width: auto;.
  5. Agora você deve abrir uma media querie com o max-width no valor 500px, e adicionar os estilos necessário, dessa forma:
    @media screen and (max-width: 500px) {
    .container-jogo {
        display: flex;
        flex-direction: column;
        margin: 1rem;
    }

    .imagem__amostra,
    .imagem__amostra2 {
        margin: 1rem auto;
        padding: 0;
    }

    .texto-2 {
        order: 0;
    }

    .imagem__amostra2 {
        order: 1;
    }
}
  6. Assim as mudanças estarão feitas e tudo vai estar resolvido. Eu vou deixar os arquivos de código completos e corrigidos na próxima mensagem junto com algumas dicas para você melhorar a estrutura do código tá.

Mas agora vamos entender o que aconteceu no seu projeto.

  • Primeiro eu coloquei div´s para englobar os textos e imagens em seções para poder trabalhar com elas uma por uma, e claro reutilizei os estilos para todas as divisões.
  • Depois eu mudei a ordem das imagens e textos da segunda seção para poder mudar a ordem que elas aparecem na tela.
  • Após isso, já no CSS foi colocado o flexbox e usei as propriedades dele para organizar as imagens e textos, e organizei tudo e programei eles para quebrar a linha quando necessário.
  • E após isso eu organizei a ordem das imagens e textos em telas menores usando o media querie.
  • Contudo algumas partes precisaram de classes únicas por conta de estilizações especificas de cada uma.

Em suma, era isso.

Vou deixar os códigos e algumas dicas abaixo.

solução!
por Renan Cezar Wuicik
| 3167.3k xp | 6165 posts

Aqui você pode baixar os arquivos HTML e CSS prontos para download e uso:

A seguir, vou fornecer algumas boas práticas e sugestões de melhorias para o seu HTML e CSS:

HTML:

  1. Indente o código corretamente: Isso torna o código mais legível e facilita a identificação de estruturas hierárquicas. Pode-se usar dois espaços ou quatro espaços para cada nível de indentação.

  2. Adicione comentários para explicar partes importantes do código, como cabeçalhos, seções ou blocos complexos. Isso ajuda outras pessoas (ou você mesmo no futuro) a entenderem o propósito de cada parte do código.

  3. Use letras minúsculas nas tags e atributos HTML: Embora os navegadores modernos ignorem a diferença entre letras maiúsculas e minúsculas, é uma boa prática usar letras minúsculas para manter a consistência e legibilidade do código.

  4. Evite o uso de múltiplas tags <br>: Em vez disso, utilize elementos HTML adequados, como parágrafos <p> para agrupar blocos de texto.

  5. Use um arquivo CSS externo: Ao invés de ter todo o CSS no arquivo HTML, é uma prática recomendada separar o CSS em um arquivo externo e vinculá-lo ao HTML usando a tag <link>. Isso torna o código mais organizado e facilita a manutenção.

  6. Forneça descrições alternativas para as imagens: É importante adicionar atributos "alt" às tags de imagem para fornecer uma descrição alternativa para usuários que utilizam leitores de tela ou quando a imagem não pode ser exibida corretamente.

  7. Use classes com nomes significativos: Tente dar nomes mais descritivos para suas classes, para que fique claro qual é o propósito de cada elemento.

CSS:

  1. Organize as propriedades do CSS: Mantenha todas as propriedades relacionadas a um mesmo elemento agrupadas juntas. Isso facilita a leitura e a manutenção do código.

  2. Evite estilos inline: É preferível utilizar classes no HTML e definir os estilos no arquivo CSS, pois isso separa a lógica de estilo do conteúdo.

  3. Utilize seletores mais eficientes: Algumas regras CSS podem ser mais eficientes para melhorar a performance, como usar classes ao invés de seletores de elementos para evitar que o CSS seja aplicado em todos os elementos desse tipo na página.

  4. Evite estilos de texto rígidos: Evite definir tamanhos de fonte fixos em pixels. Use unidades relativas como 'em' ou 'rem' para que o tamanho do texto possa se ajustar melhor a diferentes tamanhos de tela e preferências do usuário.

  5. Responsividade: Certifique-se de que seu site é responsivo, ou seja, que se adapta bem a diferentes tamanhos de tela e dispositivos, como smartphones e tablets.

  6. Consistência de nomenclatura: Mantenha a nomenclatura das classes e IDs consistente em todo o seu código.

  7. Evite floats: O uso de floats para posicionamento de elementos pode causar problemas de layout. Considere usar Flexbox ou Grid para layouts mais modernos e flexíveis.

Lembre-se sempre de validar o seu código HTML e CSS para garantir que esteja corretamente escrito.

Espero que essas sugestões sejam úteis para aprimorar o seu código e melhorar a legibilidade e manutenção.

Se tiver alguma dúvida ou precisar de ajuda adicional, estou aqui para ajudar.

Abraços e Boa sorte com o seu desenvolvimento!

por Lucas Melo Pessoa
| 47.4k xp | 6 posts

Olá Renan Bom dia, tudo blz!

Desulpa pela demora do meu retorno, gostaria de lhe informar que deu certo a sua sugestão! Na hora nem pensei em colocar uma div rsrsrs, mas fico muito grato pelo seu tempo, paciência e as dicas. Muito obrigado mesmo

por Renan Cezar Wuicik
| 3167.3k xp | 6165 posts

Oiii Lucas!

Fico feliz que pude ajudar.

Nem se preocupe, foi um prazer lhe ajudar.

Abraços e se precisar conte conosco tá.

Boa sorte em sua jornada de aprendizado.