3
respostas

Quadro G1 menor que os demais

Boa tarde!

Todos os quadros ficaram alinhados e no tamanho correto, somente o do G1 ficou menor que os demais. Ele está alinhado, mas com o quadro menor. Não consigo achar o erro

Segue o código HTML e CSS

<ul class="portfolio">
                <li>
                    <a href="http://www.bmw.com">
                        <figure class="quadro-bmw">
                            <img class="bmw" src="bmw.png" alt="Site da BMW">
                            <figcaption>BMW.com: Reformulação de design e implementação de HTML, CSS e JavaScript</figcaption>
                        </figure>
                    </a>
                </li>
                <li>
                    <a href="https://www.uol.com.br">            
                        <figure class="quadro-uol">
                            <img class="uol" src="uol.png" alt="Site da uol">
                            <figcaption>UOL.com.br: Reformulação de design e implementação de HTML, CSS e JavaScript</figcaption>
                        </figure>
                    </a>
                </li>
                <li>
                    <a href="https://www.ibm.com">
                        <figure class="quadro-ibm">
                            <img class="ibm" src="ibm.png" alt="Site da ibm">
                            <figcaption>IBM.com:Aplicação de progressive enhancement em conjunto com aplicação Back-End</figcaption>
                        </figure>
                    </a>
                </li>
                <li>
                    <a href="https://g1.globo.com">
                        <figure class="quadro-g1">
                            <img class="g1" src="g1.png" alt="Site do g1">
                            <figcaption>G1.com.br:Reformulação de design e implementação de HTML, CSS e JavaScript</figcaption>
                        </figure>
                    </a>
                </li>
            </ul>
.portfolio li {
    display: inline-block;
    border:solid 8px #000;
    background-color: #FAFFFC;
    padding:16px;
    margin-bottom: 16px;
    margin-right: 16px;
    width: 45%;
    box-sizing: border-box;
}

.portfolio img {
    width: 100%;
}
3 respostas

Pra mim estão todos do mesmo tamanho

Abraços

No navegador ele continua menor, eu uso o chrome, mas fiz teste com FireFox e o IE e continua a mesma coisa o G1 menor que os demais.

Olhei no inspecionar e eles estão com o mesmo tamanho, porém visualmente mostra menor

Verifique os caminhos das imagens se estão no caminho correto, no capítulo anterior pede para organizar por pastas, tanto das imagens como dos arquivos css. Se não, compare o seu arquivo "portfolio.html" com o .zip do projeto final.