How to put two pictures on this grid on each line for a 1366*768 resolution?

Asked

Viewed 52 times

0

Good evening, I need help (tcc), I found an effect on the internet and I decided to incorporate it to my project but some problems arose, so I created a separate effect file to be less complicated, instead of having to deal with more lines, the following bug is I would like this effect and grid to show in the resolution to which I am(1366 *768) at least about 4 products per line, but I can’t find what is preventing it, no matter how much I smear the code nothing changes only 2 photos per line. codepen.io/LGF26/pen/yzZOoq Thanks for your attention. 

<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>
javascript jquery html css3
  • 1

    Your question is vague, edit and describe your difficulty or problem.

2 answers

0

Buddy, there was a min-width limit on the minimum size of the figures, so you couldn’t get it down. Then I removed, and put their width as 23% and it worked.

Forehead:

.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;
}

0

Friend there is a function in CSS calc(25%-10px); with this function you calculate the size of the element - the margins you add to it, your figures are not fitting in the parent element, because the margins added to each figure is bursting the 100%.

Browser other questions tagged javascript jquery html css3

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