HTML and CSS responsiveness error

Question

HTML and CSS responsiveness error

Asked 6 years, 6 months ago

Viewed 72 times

2

When I minimize the screen, the photos stay outside the block, follow the HTML and CSS code

<!DOCTYPE HTML>
<HTML lang="PT-BR">
<head>
    <title>Cartola dos Amigos</title>
    <meta charset="UTF-8">
    <link href="https://fonts.googleapis.com/css?family=Open+Sans|Pacifico|Roboto+Slab:400,900" rel="stylesheet">
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/style.css">


</head>
<body>

        <nav>
            <a href="#">DICAS DO CARTOLA</a>
            <ul>
                <li><a href="#inicio">INÍCIO</a></li>
                <li><a href="#times">TIMES</a></li>
                <li><a href="#contato">CONTATO</a></li>
            </ul>
        </nav>  

            <section id="inicio">
            <h2>INÍCIO</h2>
            <p>Somos uma liga que começou com uma brincadeira de quem é realmente apaixonado por futebol e veio crescendo com o passar do tempo</p>
            <img src="image/9.jpg" alt:"9">
            </section>


            <section id="times">
            <h2>TIMES</h2>
            <p> Temos para você os mais variados times que você pode apostar e escolher para sua mitada ou ganho ainda mais de cartolas.</p>
            <div>
           <div class="figure">
               <p><img class=scaled src="image/3.jpg" alt="cartola"></p>
                   <p>Time do Editor</p>
                   <figcaption><p>ESCALAÇÃO</p></figcaption>
                   <figcaption><p>Goleiro: Wilson R$ 10,00</p></figcaption>
                   <figcaption><p>Goleiro: Wilson R$ 10,00</p></figcaption>
                   <figcaption><p>Goleiro: Wilson R$ 10,00</p></figcaption>
                   <figcaption><p>Goleiro: Wilson R$ 10,00</p></figcaption>
                   <figcaption><p>Goleiro: Wilson R$ 10,00</p></figcaption>
                   <figcaption><p>Goleiro: Wilson R$ 10,00</p></figcaption>
                   <figcaption><p>Goleiro: Wilson R$ 10,00</p></figcaption>
                   <figcaption><p>Goleiro: Wilson R$ 10,00</p></figcaption>
                   <figcaption><p>Goleiro: Wilson R$ 10,00</p></figcaption>
                   <figcaption><p>Goleiro: Wilson R$ 10,00</p></figcaption>
                   <figcaption><p>Goleiro: Wilson R$ 10,00</p></figcaption>
               </div>

               <div class="figure">
                   <p><img class=scaled src="image/3.jpg" alt="cartola"></p>
                    <p>Time do Editor</p>
                   <figcaption><p>ESCALAÇÃO</p></figcaption>
                   <figcaption><p>Goleiro: Wilson R$ 10,00</p></figcaption>
                   <figcaption><p>Goleiro: Wilson R$ 10,00</p></figcaption>
                   <figcaption><p>Goleiro: Wilson R$ 10,00</p></figcaption>
                   <figcaption><p>Goleiro: Wilson R$ 10,00</p></figcaption>
                   <figcaption><p>Goleiro: Wilson R$ 10,00</p></figcaption>
                   <figcaption><p>Goleiro: Wilson R$ 10,00</p></figcaption>
                   <figcaption><p>Goleiro: Wilson R$ 10,00</p></figcaption>
                   <figcaption><p>Goleiro: Wilson R$ 10,00</p></figcaption>
                   <figcaption><p>Goleiro: Wilson R$ 10,00</p></figcaption>
                   <figcaption><p>Goleiro: Wilson R$ 10,00</p></figcaption>
                   <figcaption><p>Goleiro: Wilson R$ 10,00</p></figcaption>

               </div>

               <div class="figure">
                   <p><img class=scaled src="image/3.jpg" alt="cartola"></p>
                   <p>Time do Editor</p>
                   <figcaption><p>ESCALAÇÃO</p></figcaption>
                   <figcaption><p>Goleiro: Wilson R$ 10,00</p></figcaption>
                   <figcaption><p>Goleiro: Wilson R$ 10,00</p></figcaption>
                   <figcaption><p>Goleiro: Wilson R$ 10,00</p></figcaption>
                   <figcaption><p>Goleiro: Wilson R$ 10,00</p></figcaption>
                   <figcaption><p>Goleiro: Wilson R$ 10,00</p></figcaption>
                   <figcaption><p>Goleiro: Wilson R$ 10,00</p></figcaption>
                   <figcaption><p>Goleiro: Wilson R$ 10,00</p></figcaption>
                   <figcaption><p>Goleiro: Wilson R$ 10,00</p></figcaption>
                   <figcaption><p>Goleiro: Wilson R$ 10,00</p></figcaption>
                   <figcaption><p>Goleiro: Wilson R$ 10,00</p></figcaption>
                   <figcaption><p>Goleiro: Wilson R$ 10,00</p></figcaption>

               </div>

                <div class="figure">
                    <p><img class=scaled src="image/3.jpg" alt="cartola"></p>
                    <p>Time do Editor</p>
                    <figcaption><p>ESCALAÇÃO</p></figcaption>
                    <figcaption><p>Goleiro: Wilson R$ 10,00</p></figcaption>
                   <figcaption><p>Goleiro: Wilson R$ 10,00</p></figcaption>
                   <figcaption><p>Goleiro: Wilson R$ 10,00</p></figcaption>
                   <figcaption><p>Goleiro: Wilson R$ 10,00</p></figcaption>
                   <figcaption><p>Goleiro: Wilson R$ 10,00</p></figcaption>
                   <figcaption><p>Goleiro: Wilson R$ 10,00</p></figcaption>
                   <figcaption><p>Goleiro: Wilson R$ 10,00</p></figcaption>
                   <figcaption><p>Goleiro: Wilson R$ 10,00</p></figcaption>
                   <figcaption><p>Goleiro: Wilson R$ 10,00</p></figcaption>
                   <figcaption><p>Goleiro: Wilson R$ 10,00</p></figcaption>
                   <figcaption><p>Goleiro: Wilson R$ 10,00</p></figcaption>
               </div>                       

               <div class="figure">
                   <p><img class=scaled src="image/3.jpg" alt="cartola"></p>
                   <p>Time do Editor</p>
                   <figcaption><p>ESCALAÇÃO</p></figcaption>
                   <figcaption><p>Goleiro: Wilson R$ 10,00</p></figcaption>
                   <figcaption><p>Goleiro: Wilson R$ 10,00</p></figcaption>
                   <figcaption><p>Goleiro: Wilson R$ 10,00</p></figcaption>
                   <figcaption><p>Goleiro: Wilson R$ 10,00</p></figcaption>
                   <figcaption><p>Goleiro: Wilson R$ 10,00</p></figcaption>
                   <figcaption><p>Goleiro: Wilson R$ 10,00</p></figcaption>
                   <figcaption><p>Goleiro: Wilson R$ 10,00</p></figcaption>
                   <figcaption><p>Goleiro: Wilson R$ 10,00</p></figcaption>
                   <figcaption><p>Goleiro: Wilson R$ 10,00</p></figcaption>
                   <figcaption><p>Goleiro: Wilson R$ 10,00</p></figcaption>
                   <figcaption><p>Goleiro: Wilson R$ 10,00</p></figcaption>
               </div>   
                </div>
            </section>

            <section id="contato">
            <h2>CONTATO</h2>
            <p>Entre em contato agora mesmo conosco</p>
            <a href="tel:xx55555555">(xx)0000-0000</a>


        <a href="mailto:[email protected]">[email protected]</a>
     </section>

     <footer>
         <p> Desenvolvido por Saxum Tecnologia</p>
     </footer>

</body>
</html> 

/*
GERAL
*/

body{
    font-family:"Open Sans", Helvetica,Arial sans-serif;
    color: #000000;
}
h1,h2,h3{
    margin:0%;
    font-family: "Roboto Slab", Helvetica,Arial sans-serif;
    font-weight: 700;

}
/*
Menu botões configuração
*/
.botao{
    color: #000000;
    text-decoration: none;
    padding: 10px 30px;
    background-color: #FFFFFF;
    font-size: .9em;
    border-radius: 3px;
}
/*
NAVEGAÇÃO
*/

nav {
   display:flex;
   flex-direction: column;
   align-items: center;
   background-color: #000000;

}
nav > a {
    text-decoration: none;
    color: #FFFFFF;
    font-weight: 700;
    font-size: 28px;
    font-family: Pacifico,serif;

}

nav ul {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;

}

nav ul li {
    text-align: center;
    width: 100%;

}

nav ul li a {
    display: inline-block;
    padding: 10px 0;
    width: 100%;
    text-decoration: none;
    color: #f1f1f1;

}

/*
CABEÇALHO
*/

header {

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color:#000000;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 20px;
}

header p {
    margin-bottom: 2em;
}

/*
SOBRE
*/

#inicio {
    display: flex;
    flex-direction: column;,
    background-image: url('../image/9.jpg');
    background-size: contain;

    background-position: center;
    background-repeat: no-repeat;
    align-items: center;
    text-align: center;
    padding:  20px 20px;
    background-color: #A9A9A9;
    color: #f1f1f1;
}

#sobre .botao {
    background-color: #f1f1f1;
    color: #4d4d4d;
}

#times{
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: justify;
    padding: 20px 20px;
    background-color: #A9A9A9;
    color: #000000;

}

div {
  display:flex;
  text-align: top; 
  bottom: auto;
  margin: 0 20px 20px 0;


}

div.figure {

  display: table;
  padding:  10px 10px;
  min-width: 30px;  


}

div.figure p + p {
  display: table-caption;
  text-align: center;
  font-family:inherit;
  font-style:oblique;
  background: #000000;
  color: #A9A9A9



}

figcaption p {
  text-align: justify;
  margin: 5px;
  background-color:#000000;
  color:#f1f1f1


}





/*
CONTATO
*/

#contato{
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 20px;
}

/*
FOOTER
*/

footer{
    text-align: center;
    padding: 10px;
    background-color: #000000;
    color: #f1f1f1;
}

/*
MEDIA QUERIES
*/

@media screen and (min-width:300px){
    /*
    MEDIA QUERIES
    */
    nav{
        flex-direction: row;
        justify-content: space-around;
    }

    nav ul{
        flex-direction: row;
        width: 70%;
    }
    /*
   CABEÇALHO 
    */

    header{
        height: 600px;
        height: 60vh;
        justify-content: center;
    }

    /*
    SOBRE
    */

    #sobre{
        height: 250px;
        height: 30vh;
        justify-content: center;
        min-height: 250px;
    }

    /*
    SERVIÇOS
    */

    #inico {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: flex-start;
        max-width: 100px;
        margin: 0 auto;
        background-image: url('../image/9.jpg');

    }

    /*
    PORTFOLIO
    */

    #times {
        flex-direction: row;
        flex-wrap: wrap;
    }

    div{
        display: flex;
        text-align: center;
        bottom: auto;

    }

    #times h2 {
        width: 100%;
        text-align: center;

    }

    #times p{
        text-align: center;
        width: 100%;
    }

    }

    div.figure {

        float: left;
        width: -100%;
        padding: 0px;


    }


    #contato{
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-around;
        max-width: 500px;
        margin: 0 auto;

    }
    #contato h2,
    #contato p{
        width: 100%;
    }

}

Have the answers solved, helped? Do you have any problems that can be improved? If you have answered the problem, mark the answer so that the question is not pending resolution. Obg!

– Sam

2018/06/14 at 06:23

2 answers

Browser other questions tagged html css html5

You are not signed in. Login or sign up in order to post.

by Sam • **79,597** points · Answer 1 · 2018-05-23T00:46:41+00:00

The images do not have a width responsive. Actually there is no width on the images, so they won’t track the width of the div where they are inserted and will stay with fixed size.

Add to your CSS:

.scaled{
   width: 100%;
}

Which is the class of images. So they will track the width of the div.

If you want them to have a minimum or maximum width:

.scaled{
   width: 100%;
   min-width: LARGURA_MÍNIMApx;
   max-width: LARGURA_MÁXIMApx;
}

Replacing LARGURA_MÍNIMA and LARGURA_MÁXIMA for the amount you want.

by Taylor Roos • **402** points · Answer 2 · 2018-05-23T11:06:34+00:00

0

You can also use a img{max-width:100%} in your css.

Thanks, I got it with the comment above

– Italo Nunes Pereira

2018/05/24 at 00:41