Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

  • 0
Fre34ak

Site "GRANDE" demais

Pergunta

Boa Noite galera!

 

Fiz um site para fins educacionais,porém o mesmo está sendo exibido muito grande,aparece até uma barra de rolagem inferior...

Como posso diminuir a área de conteúdo de um site,sem ter que diminuir parte por parte?

 

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

3 respostas a esta questão

Recommended Posts

Olá Fre34ak,

Existem diversas soluções para o seu problema, mas depende muito da forma como foi desenvolvido o css do seu site.. Uma boa solução seria essa do Marcos-Henrique, pois o Bootstrap já vem com um esquema pronto de grids que ajuda a resolver esse problema.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Cara já ouviu falar de flexbox? É um negócio que ajuda muito nessa questão de responsividade e é bem fácil de usar.

Dá uma olhada nesse link que tem o guia completo de uso e não precisa baixar nada:

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Compartilhar este post


Link para o post
Compartilhar em outros sites

  • Conteúdo Similar

    • Por Sapinn
      Tenha um menu hamburguer que abre a esquerda mas eu gostaria que ele abrisse a direita(O menu ficaria retrátil a direita ) para meu site se adequar a responsividade 
       
      codigo do menu que fica a esquerda 
       
      <!DOCTYPE html>
      <html>
      <head>
          <meta charset="utf-8">
          <title>Menu vertical reponsivo com html e css</title>
          <link rel="stylesheet" href="style.css">
          <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.0/font/bootstrap-icons.css">
          <style>
             *{
          margin:0;
          padding:0;
      }
      .menuMobileVertical a{
          text-decoration:none;
          color:white;
          display:block;
          padding:20px 5px;
      }
      .menuMobileVertical a:hover{
          background:rgba(176,224,230);
          color:black;
      }
      body{
          font-family:arial;
      }
      input[type="checkbox"]:checked ~ nav{
          transform: translateX(350px);
      }
      .menuMobileVertical ul{
          list-style:none;
          position:absolute;
          top:70px;
          width:100%;
          
      }
      .icone-menu{
          font-size:40px;
      }
      input[type="checkbox"]{
          display:none;
      }
      .menuMobileVertical{
          background:rgba(16,16,16,.5);
          width: 350px;
          height: 100vh;
          left:-350px;
          position: absolute;
          transition:all 0.5s;
          
      }
      label{
          padding:15px;
          position:absolute;
          z-index:1;
      }

          </style>
      </head>
      <body>
          <div class="menuMobile">
              <input type="checkbox" id="check">
              <label for="check"><i class="bi bi-list icone-menu"></i></label>
              <nav class="menuMobileVertical">
                  <ul>
                      <li><a href="">HOME</a></li>
                      <li><a href="">LOGIN</a></li>
                      <li><a href="">ALUNO</a></li>
                      <li><a href="">PROFESSOR</a></li>
                      <li><a href="">CONTATO</a></li>
          </ul>
          </nav>
      </div>
      </body>
      </html>
    • Por BelleFisio
      Olá! Bom dia!
       
      Tenho uma imagem que fica responsiva na maioria dos navegadores, porém no internet explore ela não fica responsiva. No iexplore ela tbm sai da posição correta, então fiz um codigo especifico para o iexplore (o posicionamento ficou correto, porém a imagem não esta responsiva)
       
      Teria alguma forma de corrigir isso?
       
      O codigo esta assim:
      <div class="conteudo"> <div id="cabeçalho"> <div class="logotipo"> <img src="arquivo/img/logotipo.png"> </div> </div> </div>  O CSS:
      .cabeçalho{width:90%;margin-left:auto;margin-right:auto;} .logotipo {width:100%;max-width:1000px;}} .logotipo img{width:100%!important;height:auto;max-width:180px;}  
      Obrigada
       
       
    • Por BelleFisio
      Olá, bom dia!
       
      As imagens do meu site ficam corretas, nas proporções definidas, quando testo localmente (inspecionado a página no navegador) , porém quando fiz um teste no servidor online e  verifiquei em outros monitores "reais"  as imagens ficam maiores que o tamanho máximo definido (e elas aumentam desproporcionalmente), em algumas resoluções.
       
      Por exemplo: eu testei em  monitores 17 e 19 polegadas (ambos com a resolução padrão 1024 X 768 px, tbm testei outras resoluções nessa telas) e as imagens ficaram "esticadas" horizontalmente e achatadas verticalmente, mas nessa mesma resolução, no computador onde fiz essas páginas (com resolução padrão de 1366 X768 px tela de 15"), as imagens ficam corretas (simulando uma tela na  resolução de 1024X768px). Em telas menores que 15" esta tudo certo tbm.
       
      Defini  um tamanho máximo para as imagens, porém quando em telas maiores elas aumentam muito e desproporcionalmente (mesmo com  resolução que já esta definida no css) :
       
      img{ width:100%; height:auto !important; max-width:400px; max-height:300px; } @media screen and (max-width: 1024px){ .img_textos{ width:100%; max-width:300px; }  
      Teria alguma forma, de quando  o site, chegar a resolução máxima definida (1366X768 px) as imagens e o site em geral não aumentar além do estabelecido para essa resolução (sendo esse o limite máximo)? 
       
      Obrigada!
    • Por BelleFisio
      Olá! Bom dia.
       
      Estou fazendo uma página em html e css, a página contem textos e imagens (tem um título, abaixo uma foto, depois o corpo do texto (com parágrafos), mais 2 fotos posicionadas a esquerda (com uma legenda abaixo da foto) e utilizei um span ao lado das fotos para explicar mais detalhadamente a imagem (tipo um comentário ou explicação do texto). Usei divs para conter os espaçõs etc.
       
      Optei por fazer essa página à parte (fora do layout do meu site para depois acoplá-lo ao meu template) fiz isso para formatar os estilos e o texto de forma mais fácil. Até ai tudo bem, a pagina no navegador  redimensiona (obs. nessa pagina eu não coloquei responsividade ela esta redimensionando naturalmente, porém as fotos ficam bem pequenas em telas menores, e os comentários do texto (que ficam na tag span) diminuem de modo que não é possível ler, porém mantém toda a estrutura da página (igual na tela do desktop). Ou seja os textos de comentários das fotos não quebram a estrutura para descer abaixo da foto e manter o tamanho legível. 
       
      Já ao inserir o texto ao layout do site ele redimensiona  de forma desordenada e os textos se misturam e perco margens (os textos e as imagens ficam no limite da página ou seja ficam sem margens e dificulta a leitura)
       
      Eu tentei colocar no css as definições de estilos para os tamanhos de telas que queria, mas a página não responde as definições de responsividade. Alguém poderia me auxíliar nessa questão?
       
      Agradeço a atenção.  
       
       
    • Por MateusFreitas01
      Olá. Estou com um trabalho, porém existe um problema na configuração de tablet, onde o body não ocupa todo o comprimento. Porém não tenho ideia do que seja. (Não estou conseguindo fazer upload da imagem). O problema vai de 768px até 1124px.
      Link para a imagem: https://drive.google.com/open?id=0B4wD-Zk-3he2ODRyT0pyV1gydGc
      Obrigado!
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.