0

Boa Noite, preciso de ajuda (tcc), encontrei um efeito na internet e decidi incorpora-lo ao meu projeto mas alguns problemas surgiram, então criei um arquivo separado do efeito para ser menos complicado, em vez de ter que lidar com mais linhas, o bug é seguinte gostaria que este efeito e grid mostrasse na resolução ao qual estou(1366 *768) pelo menos cerca de 4 produtos por linha, mas não consigo encontrar o que esta impedindo isso, por mais que eu esmiúce o código nada muda sempre somente 2 fotos por linha. codepen.io/LGF26/pen/yzZOoq Desde já agradeço a atenção.

<html>
<head>
</head>
<body>
<style>
@font-face {
    font-weight: normal;
    font-style: normal;
    font-family: 'feathericons';
    src:url('../fonts/feathericons/feathericons.eot?-8is7zf');
    src:url('../fonts/feathericons/feathericons.eot?#iefix-8is7zf') format('embedded-opentype'),
        url('../fonts/feathericons/feathericons.woff?-8is7zf') format('woff'),
        url('../fonts/feathericons/feathericons.ttf?-8is7zf') format('truetype'),
        url('../fonts/feathericons/feathericons.svg?-8is7zf#feathericons') format('svg');
}

.grid {
    position: relative;
    margin: 0 auto;
    padding: 1em 0 4em;
    max-width: 1000px;
    list-style: none;
    text-align: center;
}

/* Common style */
.grid figure {
    position: relative;
    float: left;
    overflow: hidden;
    margin: 10px 1%;
    min-width: 320px;
    max-width: 480px;
    max-height: 360px;
    width: 48%;
    background: #3085a3;
    text-align: center;
    cursor: pointer;
}

.grid figure img {
    position: relative;
    display: block;
    min-height: 100%;
    max-width: 100%;
    opacity: 0.8;
}

.grid figure figcaption {
    padding: 2em;
    color: #fff;
    text-transform: uppercase;
    font-size: 1.25em;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.grid figure figcaption::before,
.grid figure figcaption::after {
    pointer-events: none;
}

.grid figure figcaption,
.grid figure figcaption > a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Anchor will cover the whole item by default */
/* For some effects it will show as a button */
.grid figure figcaption > a {
    z-index: 1000;
    text-indent: 200%;
    white-space: nowrap;
    font-size: 0;
    opacity: 0;
}

.grid figure h2 {
    word-spacing: -0.15em;
    font-weight: 300;
}

.grid figure h2 span {
    font-weight: 800;
}

.grid figure h2,
.grid figure p {
    margin: 0;
}

.grid figure p {
    letter-spacing: 1px;
    font-size: 68.5%;
}

/* Individual effects */


/*---------------*/
/***** Zoe *****/
/*---------------*/

figure.effect-zoe figcaption {
    top: auto;
    bottom: 0;
    padding: 1em;
    height: 3.75em;
    background: #fff;
    color: #3c4a50;
    -webkit-transition: -webkit-transform 0.35s;
    transition: transform 0.35s;
    -webkit-transform: translate3d(0,100%,0);
    transform: translate3d(0,100%,0);
}

figure.effect-zoe h2 {
    float: left;
}

figure.effect-zoe p.icon-links a {
    float: right;
    color: #3c4a50;
    font-size: 1.4em;
}

figure.effect-zoe:hover p.icon-links a:hover,
figure.effect-zoe:hover p.icon-links a:focus {
    color: #252d31;
}

figure.effect-zoe p.description {
    position: absolute;
    bottom: 8em;
    padding: 2em;
    color: #fff;
    text-transform: none;
    font-size: 90%;
    opacity: 0;
    -webkit-transition: opacity 0.35s;
    transition: opacity 0.35s;
    -webkit-backface-visibility: hidden; /* Fix for Chrome 37.0.2062.120 (Mac) */
}

figure.effect-zoe h2,
figure.effect-zoe p.icon-links a {
    -webkit-transition: -webkit-transform 0.35s;
    transition: transform 0.35s;
    -webkit-transform: translate3d(0,200%,0);
    transform: translate3d(0,200%,0);
}

figure.effect-zoe p.icon-links a span::before {
    display: inline-block;
    padding: 8px 10px;
    font-family: 'feathericons';
    speak: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.icon-eye::before {
    content: '\e000';
}

.icon-paper-clip::before {
    content: '\e001';
}

.icon-heart::before {
    content: '\e024';
}

figure.effect-zoe h2 {
    display: inline-block;
}

figure.effect-zoe:hover p.description {
    opacity: 1;
}

figure.effect-zoe:hover figcaption,
figure.effect-zoe:hover h2,
figure.effect-zoe:hover p.icon-links a {
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

figure.effect-zoe:hover h2 {
    -webkit-transition-delay: 0.05s;
    transition-delay: 0.05s;
}

figure.effect-zoe:hover p.icon-links a:nth-child(3) {
    -webkit-transition-delay: 0.1s;
    transition-delay: 0.1s;
}

figure.effect-zoe:hover p.icon-links a:nth-child(2) {
    -webkit-transition-delay: 0.15s;
    transition-delay: 0.15s;
}

figure.effect-zoe:hover p.icon-links a:first-child {
    -webkit-transition-delay: 0.2s;
    transition-delay: 0.2s;
}


@media screen and (max-width: 50em) {
    .content {
        padding: 0 10px;
        text-align: center;
    }
    .grid figure {
        display: inline-block;
        float: none;
        margin: 10px auto;
        width: 100%;
    }
}
</style>
<div class="grid">
                    <figure class="effect-zoe">
                        <img src="img/25.jpg" alt="img25"/>
                        <figcaption>
                            <h2>Salve<span>Salve</span></h2>
                            <p class="icon-links">
                                <a href="#"><span class="icon-heart"></span></a>
                                <a href="#"><span class="icon-eye"></span></a>
                                <a href="#"><span class="icon-paper-clip"></span></a>
                            </p>
                            <p class="description">Zoe never had the patience of her sisters. She deliberately punched the bear in his face.</p>
                        </figcaption>           
                    </figure>
                    <figure class="effect-zoe">
                        <img src="img/26.jpg" alt="img26"/>
                        <figcaption>
                            <h2>Salve<span>Salve</span></h2>
                            <p class="icon-links">
                                <a href="#"><span class="icon-heart"></span></a>
                                <a href="#"><span class="icon-eye"></span></a>
                                <a href="#"><span class="icon-paper-clip"></span></a>
                            </p>
                            <p class="description">Zoe never had the patience of her sisters. She deliberately punched the bear in his face.</p>
                        </figcaption>           
                    </figure>
                    <figure class="effect-zoe">
                        <img src="img/26.jpg" alt="img26"/>
                        <figcaption>
                            <h2>Salve<span>Salve</span></h2>
                            <p class="icon-links">
                                <a href="#"><span class="icon-heart"></span></a>
                                <a href="#"><span class="icon-eye"></span></a>
                                <a href="#"><span class="icon-paper-clip"></span></a>
                            </p>
                            <p class="description">Zoe never had the patience of her sisters. She deliberately punched the bear in his face.</p>
                        </figcaption>           
                    </figure>
                    <figure class="effect-zoe">
                        <img src="img/25.jpg" alt="img25"/>
                        <figcaption>
                            <h2>Salve<span>Salve</span></h2>
                            <p class="icon-links">
                                <a href="#"><span class="icon-heart"></span></a>
                                <a href="#"><span class="icon-eye"></span></a>
                                <a href="#"><span class="icon-paper-clip"></span></a>
                            </p>
                            <p class="description">Zoe never had the patience of her sisters. She deliberately punched the bear in his face.</p>
                        </figcaption>           
                    </figure>
                </div>          
</body>
</html>
1
  • 1
    Sua pergunta está vaga, edite e descreva sua dificuldade ou problema.
    – NoobSaibot
    Commented 18/10/2017 às 22:38

2 Respostas 2

0

Amigo, tinha um min-width limitando o tamanho mínimo dos figures, por isso vc não conseguia diminuir. Então eu removi, e coloquei o width deles como 23% e funcionou.

Testa aí:

.grid figure {
    position: relative;
    float: left;
    overflow: hidden;
    margin: 10px 1%;
    max-width: 480px;
    max-height: 360px;
    width: 23%;
    background: #3085a3;
    text-align: center;
    cursor: pointer;
}
1
  • opa vlw mesmo vou testar no meu código aqui. Commented 21/10/2017 às 0:12
0

Amigo existe uma função no CSS calc(25%-10px); com essa função você calcula o tamanho do elemento - as margem que você adiciona a ele, suas figuras não estão cabendo no elemento pai, pois as margens somadas a cada figura esta estourando o 100%.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .