Responsibility error in HTML and CSS

Question

Responsibility error in HTML and CSS

Navigation

#1 by (1 votes)
#2 by (0 votes)

2

When I minimize the screen, the photos are out of 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%;
    }

}

html html5 css

asked by anonymous 23.05.2018 / 01:50

2 answers

When I click on the reference id of the tag does not call the page I want Searching for the next table after a clicked element

score 1 · Answer 1

Images do not have a width responsive. In fact there is no width in the images, so they will not match the width of the div where they are inserted and will be fixed size.

Add in your CSS:

.scaled{
   width: 100%;
}

What is the class of images. So they will match the width of 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 with the value you want.

score 0 · Answer 2

0

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

23.05.2018 / 13:06