отзывчивый миниатюра блога с изображением в css сетке - PullRequest
Новая
       68

отзывчивый миниатюра блога с изображением в css сетке

0 голосов
/ 21 октября 2019

я работал над своим собственным веб-шаблоном. это еще не закончено, я застрял с некоторыми проблемами. в конце страницы я пытался создать последние миниатюры постов в блоге с сеткой CSS. Я хочу, чтобы изображение (которое содержит запись в блоге) оставалось сверху max-width:1150px и ниже. Я попытался с grid-columns, но оно скрывает изображение, и я не могу понять, почему это происходит и как это исправить. 

function toggle() {
    var sidenav = document.getElementById("sidenav");
    if (sidenav.className === "sidenav") {
        sidenav.className += " overlay";
    } else {
        sidenav.className = "sidenav";
    }
}
/*----- regular styles which belongs to styles.css -----*/
@import url("https://fonts.googleapis.com/css?family=Ubuntu:400,400i&display=swap");

body {
    font-family: "Ubuntu", sans-serif;
    background: #3f3f3f;
}

/* styling custom scrollbar for chrome */
::-webkit-scrollbar {
    width: 5px;
}

::-webkit-scrollbar-thumb {
    background: #87cf3e;
    border-radius: 10px;
}

/* styles for side navigation */
div#sidenav {
    height: 100%;
    width: 200px;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #252526;
    overflow-x: hidden;
    padding-top: 25px;
}

div#sidenav img#avatar {
    border-radius: 50%;
    width: 70%;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

p#name {
    color: #fff;
    margin-top: 15px;
    margin-bottom: 15px;
    text-align: center;
}

div#icons {
    margin-top: 15px;
    margin-bottom: 15px;
    text-align: center;
}

#chevron {
    display: none;
}

div#links {
    margin-top: 25px;
    margin-bottom: 40px;
    text-align: center;
    background-image: linear-gradient(to right, #3f3f3f, #87cf3e);
    height: auto;
    width: 100%;
    font-size: 18px;
}

div#links a {
    padding-top: 15px;
    padding-bottom: 15px;
    display: block;
    color: #fff;
    text-decoration: none;
}

.active,
div#links a:hover {
    background-image: linear-gradient(to right, #87cf3e, #3f3f3f);
}

/* styles for content */
div#content {
    margin-left: 200px;
    margin-right: 120px;
    padding: 20px;
}

/* styles for heading */
p#heading {
    text-align: center;
    color: #fff;
    font-size: 36px;
}

/* styles for techs */
div#content div#techs {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-gap: 30px;
    justify-items: center;
}

div#content div#techs img {
    width: 80px;
    height: 80px;
}

/* styles for concepts */
div#content div#concepts {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 5px;
}

div#concepts p {
    border: 1px solid #87cf3e;
    border-radius: 5px;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 5px;
    padding-right: 5px;
    color: #fff;
    font-size: 22px;
    text-align: center;
}

div#concepts p:hover {
    background: #87cf3e;
}

/* styles for posts */
div#posts {
    margin-top: 50px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 10px;
}

div#posts img {
    width: 100%;
    height: 100%;
    border-radius: 5px;
    grid-column: 1 / 3;
}

div#posts div.content {
    grid-column: 3 / 5;
}

div#posts p.heading {
    color: #fff;
    font-size: 22px;
    font-weight: bold;
    text-align: justify;
}

div#posts p.info,
div#posts p.text {
    color: #fff;
    text-align: justify;
}

div#posts button.btn {
    grid-column: 1 / 5;
}

/* styles for vertical ads */
div#v_ads {
    position: fixed;
    top: 0;
    right: 0;
    width: 120px;
    height: 100%;
    background-image: linear-gradient(to bottom, #87cf3e, #3f3f3f);
}










/*----- responsive codes which belongs to responsive.css -----*/
@media only screen and (max-width: 880px) {
    div#content div#techs img {
        width: 75px;
        height: 75px;
    }
}

@media only screen and (max-width: 855px) {
    div#content div#techs img {
        width: 70px;
        height: 70px;
    }
}

@media only screen and (max-width: 830px) {
    div#sidenav {
        width: 180px;
    }

    div#content {
        margin-left: 180px;
    }
}

@media only screen and (max-width: 810px) {
    div#sidenav {
        width: 150px;
    }

    div#icons {
        margin-left: 20px;
        margin-right: 20px;
    }

    div#content {
        margin-left: 150px;
    }
}

@media only screen and (max-width: 780px) {
    div#sidenav {
        width: 120px;
    }

    div#icons {
        margin-top: 20px;
        margin-bottom: 10px;
        margin-left: 10px;
        margin-right: 10px;
    }

    div#links {
        margin-top: 20px;
        margin-bottom: 45px;
    }

    div#content {
        margin-left: 120px;
    }
}

@media only screen and (max-width: 750px) {
    div#sidenav {
        width: 100px;
    }

    p#name {
        font-size: 13px;
    }

    div#icons {
        margin-left: 10px;
        margin-right: 10px;
    }

    div#content {
        margin-left: 100px;
    }
}

@media only screen and (max-width: 730px) {
    div#content {
        margin-right: 0;
    }

    div#v_ads {
        display: none;
    }
}

@media only screen and (max-width: 610px) {
    div#content div#techs img {
        width: 60px;
        height: 60px;
    }
}

@media only screen and (max-width: 560px) {
    div#sidenav {
        height: 230px;
        width: 100%;
        position: fixed;
        padding-top: 5px;
    }

    /* when chevron gets a click */
    div#sidenav.overlay {
        height: 100%;
    }

    div#sidenav img#avatar {
        border-radius: 50%;
        width: 20%;
    }

    p#name,
    div#icons {
        margin: 0;
    }

    #chevron {
        margin-top: 10px;
        text-align: center;
        display: block;
    }

    div#links {
        display: none;
    }

    /* when chevron gets a click */
    div#sidenav.overlay div#links {
        display: block;
    }

    div#content {
        margin-top: 230px;
        margin-left: 0;
        padding: 20px;
    }
}
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>Document</title>

        <!-- CSS -->
        <link
            rel="stylesheet"
            href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
            integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
            crossorigin="anonymous"
        />
        <link
            href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
            rel="stylesheet"
            integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN"
            crossorigin="anonymous"
        />
        <link rel="stylesheet" href="css/styles.css" />
        <link rel="stylesheet" href="css/responsive.css" />
    </head>
    <body>
        <div id="sidenav" class="sidenav">
            <img src="img/avatar.png" alt="avatar" id="avatar" />
            <p id="name">
                Lorem, ipsum.
            </p>
            <div id="icons">
                <i
                    class="fa fa-github"
                    style="color: #fff; margin: 10px; font-size: 22px;"
                ></i>
                <i
                    class="fa fa-linkedin"
                    style="color: #fff; margin: 10px; font-size: 22px;"
                ></i>
                <i
                    class="fa fa-slack"
                    style="color: #fff; margin: 10px; font-size: 22px;"
                ></i>
                <i
                    class="fa fa-youtube-play"
                    style="color: #fff; margin: 10px; font-size: 22px;"
                ></i>
            </div>
            <div id="chevron" onclick="toggle()">
                <i
                    class="fa fa-chevron-down"
                    style="color: #fff; font-size: 20px;"
                ></i>
            </div>
            <div id="links">
                <a href="#" class="active">link1</a>
                <a href="#">link2</a>
                <a href="#">link3</a>
                <a href="#">link4</a>
                <a href="#">link5</a>
            </div>
        </div>
        <div id="content">
            <p id="heading">Lorem ipsum dolor sit amet.</p>
            <div id="techs">
                <img src="img/logos/c.png" alt="c.png" />
                <img src="img/logos/cpp.png" alt="cpp.png" />
                <img src="img/logos/cs.png" alt="cs.png" />
                <img src="img/logos/java.png" alt="java.png" />
                <img src="img/logos/android.png" alt="android.png" />
                <img src="img/logos/swift.png" alt="swift.png" />
                <img src="img/logos/ios.png" alt="ios.png" />
                <img src="img/logos/python.png" alt="python.png" />
                <img src="img/logos/django.png" alt="django.png" />
                <img src="img/logos/mongodb.png" alt="mongodb.png" />
                <img src="img/logos/mysql.png" alt="mysql.png" />
                <img src="img/logos/php.png" alt="php.png" />
                <img src="img/logos/laravel.png" alt="laravel.png" />
                <img src="img/logos/html.png" alt="html.png" />
                <img src="img/logos/css.png" alt="css.png" />
                <img src="img/logos/sass.png" alt="sass.png" />
                <img src="img/logos/bootstrap.png" alt="bootstrap.png" />
                <img src="img/logos/js.png" alt="js.png" />
                <img src="img/logos/jquery.png" alt="jquery.png" />
                <img src="img/logos/react.png" alt="react.png" />
                <img src="img/logos/vue.png" alt="vue.png" />
                <img src="img/logos/git.png" alt="git.png" />
                <img src="img/logos/docker.png" alt="docker.png" />
                <img src="img/logos/jenkins.png" alt="jenkins.png" />
            </div>
            <br />
            <br />
            <p id="heading">Lorem ipsum dolor sit amet.</p>
            <div id="concepts">
                <p>Lorem, ipsum dolor.</p>
                <p>Lorem, ipsum dolor.</p>
                <p>Lorem, ipsum dolor.</p>
                <p>Lorem, ipsum dolor.</p>
                <p>Lorem, ipsum dolor.</p>
                <p>Lorem, ipsum dolor.</p>
            </div>
            <br />
            <br />
            <p id="heading">Lorem ipsum dolor sit amet.</p>
            <div id="posts">
                <img src="img/windows.jpg" />
                <div class="content">
                    <p class="heading">
                        Lorem ipsum dolor sit amet, consectetur adipisicing
                        elit. Vero, quod!
                    </p>
                    <p class="info">admin - 21/10/19</p>
                    <p class="text">
                        Lorem ipsum dolor sit amet, consectetur adipisicing
                        elit. Sunt, repellendus deleniti nemo sint quis quae sit
                        aut asperiores quibusdam reiciendis minus magni, aliquid
                        at voluptates aperiam, explicabo consectetur quia.
                        Assumenda pariatur magnam debitis eveniet ducimus
                        voluptas cumque quod vel, iusto reiciendis eligendi
                        accusamus dicta doloremque atque earum. Nostrum,
                        provident rerum!
                    </p>
                </div>
                <button class="btn btn-info btn-block">
                    Read More
                </button>
            </div>
        </div>
        <div id="v_ads"></div>
        <!-- JS -->
        <script
            src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
            integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
            crossorigin="anonymous"
        ></script>
        <script
            src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
            integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
            crossorigin="anonymous"
        ></script>
        <script
            src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
            integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
            crossorigin="anonymous"
        ></script>
        <script src="js/app.js"></script>
    </body>
</html>
...