Jump to content
julianaparra

Quando minimizo a tela minhas div cortam no meio

Recommended Posts

Eu acho que posso estar errando no CSS, quando minimizo a pag as div cortam e a imagem de cima também, elas não ficam proporcionais.

Esse é meu código, sei não esta responsivo, acho que tem mais div do que deveria, mas se tiro alguma ele buga. 

 

Eu não consigo anexar as fotos para mostrar e o site ainda não esta no ar. http://julianaparra-dev.com/

 

HTML

<!DOCTYPE html>
<html lang="pt-BR">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="./css/main.css">
    <title>Juliana Parra</title>
</head>
 
<body>
    <header class="menu-principal">
        <main>
            <div class="header-1">
                <div class="logo">
                    <a href="index.html">
                        <img src="./img/logo.png" />
                    </a>
                </div>
                <div class="links">
                    <div class="menu">
                        <nav>
                            <ul>
                                <li><a href="index.html">Início</a></li>
                                <li><a href="sobre.html">Sobre</a></li>
                                <li><a href="portifolio.html">Portifolio</a></li>
                                <li><a href="contato.html">contato</a></li>
                            </ul>
                        </nav>
                    </div>
                    <ul class="redes-sociais">
                        <li><a href="https://github.com/Parrajuliana" target="_blank"><img src="./img/github.png"
                                    alt="Meu github"></a></li>
                        <li><a href="https://www.linkedin.com/in/juliana-do-a-parra-00701818a/" target="_blank"><img
                                    src="./img/linkedin.png" alt="Meu linkedIn"></a></li>
                    </ul>
                </div>
            </div>
        </main>
    </header>
    <div class="header-2">
        <div class="imagem-fundo"></div>
        <div class="container"></div>
 
        <div class="imagem-miolo">
            <img class="imagem-bolinhas" src="./img/imagem_centro_icones.png" alt="">
        </div>
    </div>
    <div>
        <div class="texto">
            <p><strong>Lorem ipsum dolor sit amet consectetur adipisicing elit.</strong>
                Dolore ullam ratione numquam repellendus enim, reprehenderit molestias,
                excepturi tempore nemo porro vel sequi ea quisquam velit sunt?
                Recusandae quidem aperiam tenetur.</p>
            <div class="botao">
                <a class="bt bt-lj" href="sobre.html"><strong>saiba mais</strong></a>
            </div>
        </div>
    </div>
    <footer>
        <div class="rodape">
            <main>
                <div class="direitos-reservados">
                    2019 Todos os Direitos Reservados
                </div>
            </main>
        </div>
    </footer>
</body>
 
</html>
 
 
//CSS
 
body {
    font-family: 'Open Sans'sans-serif;   
    width: 100%;
    height: 100%;
    margin: 0 auto;   
    }
.menu-principal {
    background-color: #252323;
    height: 68px;
    width: 100%;         
   }
main {
    margin: 0 auto;
    width: 980px;    
    position: relative;
}
.logo {
    float: left;
    padding: 10px;
    width: 30%;
}
.links ul li {
    margin-left: 20px;
    display: inline-block;
    float: left;
    list-style: none;
}
.links{
    padding: 10px;
    width: 65%;
    float: left;
}
.menu ul li a {
    padding: 10px;
    color: #8b8b8b;
    text-decoration: none;
    font-size: 16px;
    text-transform: uppercase;
}
.menu ul li a:hover{
    color: #00bac6;
}
.slick-initialized {
    overflow: hidden;
}
.imagem-fundo {
    background-image: url(/img/imagem_home.png);
    width: 100%;  
    height: 400px
    background-repeat: no-repeat;       
}
.container {    
   /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#00aa9b+8,2989d8+45,207cca+52,00ba3a+100 */
background: #00aa9b/* Old browsers */
background: -moz-linear-gradient(-45deg#00aa9b 8%#2989d8 45%#207cca 52%#00ba3a 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(-45deg#00aa9b 8%,#2989d8 45%,#207cca 52%,#00ba3a 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg#00aa9b 8%,#2989d8 45%,#207cca 52%,#00ba3a 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00aa9b', endColorstr='#00ba3a',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
    display: block;
    width: 100%;  
    height: 30px;
}
 
.imagem-bolinhas{
    width: 1080px;
    position: relative;  
    left: 250px;    
    top: 20px;         
    height: 300px;      
    background-repeat: no-repeat;  
    size: cover;  
}
.texto {
    text-align: center;    
    width: 600px;
    height: 300px
    font-size: 25px;  
    padding: 20px;   
    position:relative;
    top:20%;
    left:30%;     
}
 
.bt {     
    text-decoration:none;   
        font-size: 15px;
        color:white;
        padding: 10px 20px;
        background: -moz-linear-gradient(
            top,
            #0083ab 0%,
            #00ba3b);
        background: -webkit-gradient(
            linearleft topleft bottom,
            from(#0083ab),
            to(#00ba3b));        
        border-radius: 10px;
        border: 1px solid;
        -moz-box-shadow:
            0px 1px 3px rgba(0,0,0,0.5),
            inset 0px 0px 0px rgba(255,255,255,0.7);
        -webkit-box-shadow:
            0px 1px 3px rgba(0,0,0,0.5),
            inset 0px 0px 0px rgba(255,255,255,0.7);
        box-shadow:
            0px 1px 3px rgba(0,0,0,0.5),
            inset 0px 0px 0px rgba(255,255,255,0.7);    
}
 
.rodape {
    color: #c1c1c1;
    background-color: #252323;
    height: 60px;
    width: 100%;      
}
.direitos-reservados {
    padding: 20px;
    width: 60%;
    float: right;    
}
Edited by julianaparra
coloquei o link

Share this post


Link to post
Share on other sites
5 horas atrás, julianaparra disse:

 <img class="imagem-bolinhas" src="./img/imagem_centro_icones.png" alt="">

 

Tente fazer assim

      <img class="imagem-bolinhas" src="./img/imagem_centro_icones.png" alt=""  style="width:100%;max-width:1000px;margin-top:32px;">

 

Share this post


Link to post
Share on other sites

Basicamente o que você tem são elementos com largura fixa, ou seja não importa a resolução eles vão sempre possuir a mesma largura.

Ou caso a muitos overflow o que causa a rolagem e não o ajuste na resolução.

 

Bem acessei o link fiz o download do código fonte e refiz a estrutura que estava cheia de elementos não usados, e dei uma arrumada no css que havia muita coisa inútil.

Agora é só aplicar responsivo usando media query e ajustar cada elemento de acordo com a resolução.

 

HTML

<!DOCTYPE html>
<html lang="pt-BR">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="./css/main.css">
        <title>Juliana Parra</title>
    </head>

    <body>
        <header class="menu-principal">
            <div class="logo">
                <a href="http://julianaparra-dev.com/index.html">
                    <img src="./img/logo.png" />
                </a>
            </div>
            <div class="links">
                <ul>
                    <li><a href="http://julianaparra-dev.com/index.html">Início</a></li>
                    <li><a href="http://julianaparra-dev.com/sobre.html">Sobre</a></li>
                    <li><a href="http://julianaparra-dev.com/portifolio.html">Portifolio</a></li>
                    <li><a href="http://julianaparra-dev.com/contato.html">contato</a></li>
                    <li>
                        <a href="https://github.com/Parrajuliana" target="_blank">
                            <img src="./img/github.png" alt="Meu github">
                        </a>
                    </li>
                    <li>
                        <a href="https://www.linkedin.com/in/juliana-do-a-parra-00701818a/" target="_blank">
                            <img src="./img/linkedin.png" alt="Meu linkedIn">
                        </a>
                    </li>
                </ul>
            </div>
            <div style="clear: both"></div> <!-- Limpar todos flutuantes antes de prosseguir -->
        </header>

        <div class="imagem-fundo"></div>
        <div class="container"></div>
        <div class="imagem-miolo">
            <img class="imagem-bolinhas" src="./img/imagem_centro_icones.png" alt="">
        </div>
        <div class="texto">
            <!-- Em HTML 5 não se usa mais a tag <strong>, é recomendação da W3.org -->
            <p><span style="font-weight: bold">Lorem ipsum dolor sit amet consectetur adipisicing elit.</span>
                Dolore ullam ratione numquam repellendus enim, reprehenderit molestias,
                excepturi tempore nemo porro vel sequi ea quisquam velit sunt?
                Recusandae quidem aperiam tenetur.</p>
            <div class="botao">
                <a class="bt" href="http://julianaparra-dev.com/sobre.html">saiba mais</a>
            </div>
        </div>
        <div class="rodape">
            <main>
                <div class="direitos-reservados">
                    2019 Todos os Direitos Reservados
                </div>
            </main>
        </div>
    </body>
</html>

 

CSS

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box
}
html {
    overflow-x: hidden
}
body {
    margin: 0;
    padding: 0;
    font-family: 'Open Sans', sans-serif;
    background-color: #ffffff
}
.menu-principal {
    background-color: #252323;
    height: 68px       
}
.logo, links {
    float: left;
    padding: 10px
}
.logo {
    width: 30%
}
.links {
    height: inherit;
    line-height: 68px
}
.links > ul {
    list-style: none;
    margin: 0
}
.links > ul > li {
    padding: 0 10px;
    display: inline-block
}
.links > ul > li > a {
    color: #8b8b8b;
    font-size: 16px;
    text-decoration: none;
    text-transform: uppercase
}
.links > ul > li:nth-child(5) {
    padding: 0 0 0 10px
}
.links > ul > li > a:hover {
    color: #00bac6
}
.imagem-fundo {
    background-image: url(../img/imagem_home.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    min-height: 200px
}
.container {
    background: #00aa9b;
    background: linear-gradient(135deg, #00aa9b 8%,#2989d8 45%,#207cca 52%,#00ba3a 100%);
    width: 100%;  
    height: 30px
}
.imagem-miolo {
    text-align: center
}
.imagem-bolinhas {
    margin-top: 20px;
    max-width: 100%;
    max-height: 260px;
    min-height: 200px
}
.texto {
    max-width: 600px;
    height: 300px; 
    margin: auto;
    text-align: center;
    font-size: 25px;  
    padding: 20px
}
.botao {
    font-weight: bold;
    margin-top: 10px
}
.bt {     
    text-decoration:none;   
    font-size: 15px;
    color:white;
    padding: 10px 20px;
    background: linear-gradient(#0083ab, #00ba3b);
    border-radius: 10px;
    border: 1px solid;
    box-shadow: 0px 1px 3px rgba(0,0,0,0.5) 
}
.rodape {
    color: #c1c1c1;
    background-color: #252323;
    height: 60px
}
.direitos-reservados {
    padding: 20px;
    float: right
}

 

Um ponto que notei que não vai ficar legal é a imagem "imagem-bolinhas", eu pessoalmente faria um composto de alguns elementos para gerar algo similar ou idêntico ao da imagem, uso de ícones vetoriais seria de grande utilidade nessa situação.

Outro ponto que devo ressaltar... Evite ao máximo uso de imagem PNG principalmente se são grandes, pois são muito pesadas para carregar, prefira usa JPG ou JPEG.

 

É de muito prático aderir a framework's ou css padronizados para construir a base do layout.

Caso interesse eu mesmo criei um arquivo css para definições básicas de estrutura https://github.com/Spell-Master/sm-web/blob/master/css/sm-default.css

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By bleszerd
      Estou migrando para o frontend recentemente e tenho tido dificuldades para lidar com a formatação de estilos com o CSS, alguém poderia me ajudar? Minha intenção é que o conteúdo destacado em vermelho ocupe o local da marcação verde e o resto fique centralizado na tela. Estou usando o ReactJS para a composição, porém o CSS segue as mesmas regras do tradicional com HTML puro.
       
      Como podem ver até pela imagem, design não é meu ponto forte.
       
      Código do JSX (Componente do React):
      <div className="login-container"> <section className="form"> <form> <h1>Bem vindo!</h1> <input type="text" placeholder="Login" /> <input type="password" placeholder="Senha" /> <p>Possuo um Token</p> <input type="text" placeholder="Token" className="token-input" /> </form> </section> </div>  
      Código do CSS:
      .login-container{ display: flex; align-items: center; justify-content: center; width: 100%; max-width: 1120px; height: 100vh; margin: 0 auto; } .login-container section.form{ width: 100%; max-width: 350px; } .login-container section.form form{ display: flex; justify-content: center; width: 100%; max-width: 1250px; height: 100%; max-height: 700px; } .login-container section.form form h1{ color: #fff; font-weight: bolder; text-shadow: #1B182E 2px 2px 8px; font-size: 42px; margin-bottom: 32px; position: absolute; margin-top: -65px; background: transparent; } .login-container section.form form input{ display: flex; justify-content: space-between; margin: 5px; width: 180px; height: 40px; max-width: 100%; font-weight: bold; padding: 8px; border-radius: 5px; color: white; background: #0A0816; border: solid #0D0929 2px; } .login-container section.form form p{ } .login-container section.form form input + p + input{ background: black; border: solid yellow 2px; }  
      Pra quem não estiver afim de interpretar todo o código para tentar ajudar apenas diga o que você imagina que resolverá o problema. Obrigado desde já :)

    • By sander147
      Boa Tarde, estou com um problema ao por o menu ao lado direito, ele não fica alinhado com o campo de notícias, eu não faço ideia de como fazer eles ficarem lado a lado, alguém poderia me dar uma luz? eu estou seguindo um livro da casa do código mas os resultados não saíram iguais depois que eu fui além do livro. :/
      Deveria ficar assim:
       https://uploaddeimagens.com.br/images/002/561/267/original/menu.png?1585683825
       
      Ficou assim:

    • By vcapelli
      Eu sei o que eu vou pedir é meio loucura mas espero que ao menos seja possível. É o seguinte: eu quero fixar um valor X e sempre depois das 18 horas esse valor atualizasse aumentando ou diminuindo de acordo com a bolsa de valores. Exemplo:
      Orçamento 100bi, hoje a bolsa fechou em queda de 2,73% então ela atualizaria para 97,27bi.
      Eu sei que é loucura mas se for possível realizar agradeceria imensamente, não precisam ter pressa também
    • By SaraAlcaras
      Olá galera! Estou criando um jogo da velha para coloca no meu portfólio, porem estou com um pequeno problema que não consigo resolver.. Quando o jogo finaliza a tela da uma ampliada/expandida no tamanho é quase imperceptível porem é algo que eu gostaria de mudar. Qual propriedade posso usar no css pra evitar que isso aconteça?
       
      Código CSS:

       
      :root{ --O-color: rgb(10, 177, 243); --X-color: rgb(253, 148, 148); --E-color: rgb(0, 0, 0); } * { margin: 0; padding:0; box-sizing: border-box; } body { display: grid; align-items: center; justify-content: center; font-family: grenze; height: 100vh; background-color: rgb(153, 153, 153); } .nextPlayer{ color: rgb(60, 62, 63); border: 1px solid rgb(211, 223, 104); box-shadow: 3px 5px 12px rgb(0, 0, 0); } .players { color: rgb(60, 62, 63); border: 1px solid rgb(211, 223, 104); box-shadow: 3px 5px 12px rgb(0, 0, 0); height: 55px; display: flex; flex-direction: column; justify-content: space-evenly; } .player{ display: flex; } .topo { display: flex; flex-direction: row; align-items: center; justify-content: space-evenly; margin-bottom: 20px; } .topo .players, .topo .nextPlayer { font-family: grenze; font-weight: bold; border-radius: 4px; } .title { font-size: 3rem; color: rgb(60, 62, 63); margin-bottom: 0; } .title2 { display: none; } .board { display: grid; grid-template-columns: repeat(3, 178px); grid-template-rows: repeat(3, 130px); gap: 1rem; cursor: pointer; } .board.game-over{ opacity: 0.10; } .cell { display: grid; align-items: center; justify-content: center; background-color: white; border-radius: 4px; font-size: 2rem; font-weight: bold; color: #00000066; } .cell:not(.O):not(.X):hover { box-sizing: 0 20px 25px -5px rgba(0, 0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0, 0.4); } .cell.O, .cell.X, .game-over .cell { cursor: not-allowed; } .cell.O { background-color: var(--O-color); } .cell.X { background-color: var(--X-color); } footer{ text-align: center; font-size: 30px; } .winner-message{ margin: 1rem; } .winner-message span.O{ color: var(--O-color); } .winner-message span.X{ color: var(--X-color); } .winner-message span.E{ color: var(--E-color); } button { padding: 0.9rem 1.5rem; border: none; border-radius: 5px; box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0, 0.6); background-color: rgb(68, 255, 146); color: white; font-size: 1.2rem; cursor: pointer; } @media only screen and (max-width: 767px) and (orientation:portrait) { body { width: 100%; text-align: justify; } .board{ grid-template-columns: repeat(3, 88px); grid-template-rows: repeat(3, 80px); -webkit-tap-highlight-color: transparent; } button { font-size: 10px; } .cell { border-radius: 3px; font-size: 1rem; } footer { font-size: 13px; } .title { font-size: 1.5rem; display: none; padding: 0.6em; /* transform: translateY(80%); */ } .title2 { display: flex; font-size: 1.5rem; padding: 0.6em; color: rgb(60, 62, 63); } .topo{ flex-direction: column; } .players { height: 65px; width: 95px; align-items: center; } .nextPlayer{ text-align: center; height: 22px; width: 118px; /* transform: translateY(-150%); */ } } @media only screen and (max-width: 767px) and (orientation:landscape) { body { width: 100%; text-align: justify; } .board { grid-template-columns: repeat(3, 60px); grid-template-rows: repeat(3, 60px); -webkit-tap-highlight-color: transparent; } footer { font-size: 0.5rem; display: flex; flex-direction: row; align-items: center; justify-content: space-evenly; } button { font-size: 0.5rem; } .title { font-size: 0.8rem; } .players{ height: 30px; width: 50px; align-items: center; font-size: 0.5rem; } .nextPlayer{ text-align: center; height: 14px; width: 60px; font-size: 0.5rem; } .cell { border-radius: 3px; font-size: 0.8rem; } } @media only screen and (min-width: 991px) and (max-width: 1200px) { body { width: 100%; text-align: justify; } }

×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.