Support » Developing with WordPress » My post card which bootstrap 4 made doesnt seem as column

  • Hello,my post card seem bad.I want to show it as 3 column.How can I do it?

             //paste
                $args = array(
                    'post_type' => $settings['post_type'],
                    'author__in' => $settings['authors2'],
                    'posts_per_page' => $settings['posts_per_page'],
                    'orderby' => $settings['orderby'],
                    'order' => $settings['order'],
                );
    
    echo'<div class="container">';
    echo'<div class="row">';
    echo'<div class="col-md-12">';
    
                $query = new \WP_Query($args);
                if ($query->have_posts()) {
                    while ($query->have_posts()) {
                        $query->the_post();
                        //echo "<div style=background:blue> lsdkjf </div>";
                       // get_template_part( 'template-parts/content', 'masonry' );
                       // the_title();
                        //the_content();
    
    //ekleme
                        ?>
    
                        <style>
    
                            h1{
                                text-align:center;
                                margin-bottom:50px;
                                margin-top:50px;
                            }
                            .blog-card-blog {
                                margin-top: 30px;
                            }
                            .blog-card {
                                display: inline-block;
                                position: relative;
                                width: 100%;
                                margin-bottom: 30px;
                                border-radius: 6px;
                                color: rgba(0, 0, 0, 0.87);
                                background: #fff;
                                box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
                            }
                            .blog-card .blog-card-image {
                                height: 60%;
                                position: relative;
                                overflow: hidden;
                                margin-left: 15px;
                                margin-right: 15px;
                                margin-top: -30px;
                                border-radius: 6px;
                                box-shadow: 0 16px 38px -12px rgba(0, 0, 0, 0.56), 0 4px 25px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2);
                            }
                            .blog-card .blog-card-image img {
                                width: 100%;
                                height: 100%;
                                border-radius: 6px;
                                pointer-events: none;
                            }
                            .blog-card .blog-table {
                                padding: 15px 30px;
                            }
                            .blog-table {
                                margin-bottom: 0px;
                            }
                            .blog-category {
                                position: relative;
                                line-height: 0;
                                margin: 15px 0;
                            }
                            .blog-text-success {
                                color: #28a745!important;
                            }
                            .blog-card-blog .blog-card-caption {
                                margin-top: 5px;
                            }
                            .blog-card-caption {
                                font-weight: 700;
                                font-family: "Roboto Slab", "Times New Roman", serif;
                            }
                            .fa {
                                display: inline-block;
                                font: normal normal normal 14px/1 FontAwesome;
                                font-size: inherit;
                                text-rendering: auto;
                                -webkit-font-smoothing: antialiased;
                                -moz-osx-font-smoothing: grayscale;
                            }
                            .blog-card-caption, .blog-card-caption a {
                                color: #333;
                                text-decoration: none;
                            }
    
                            p {
                                color: #3C4857;
                            }
    
                            p {
                                margin-top: 0;
                                margin-bottom: 1rem;
                            }
                            .blog-card .ftr {
                                margin-top: 15px;
                            }
                            .blog-card .ftr .author {
                                color: #888;
                            }
    
                            .blog-card .ftr div {
                                display: inline-block;
                            }
                            .blog-card .author .avatar {
                                width: 36px;
                                height: 36px;
                                overflow: hidden;
                                border-radius: 50%;
                                margin-right: 5px;blog-
                            }
                            .blog-card .ftr .stats {
                                position: relative;
                                top: 1px;
                                font-size: 14px;
                            }
                            .blog-card .ftr .stats {
                                float: right;
                                line-height: 30px;
                            }
    
                        </style>
    
        <!-- <div class="col-md-2"> -->
            <div class="blog-card blog-card-blog col-md-4">
                <div class="blog-card-image">
                   <!--  <a href="#"> <img class="img" src=<?php //the_post_thumbnail(); ?>> </a> -->
    
                    <?php the_post_thumbnail('medium', array('class' => 'img')); ?>
                    <div class="ripple-cont"></div>
                </div>
                <div class="blog-table">
                    <h6 class="blog-category blog-text-success"><i class="far fa-newspaper"></i> News</h6>
                    <h4 class="blog-card-caption">
                        <a href="#"><?php the_title(); ?></a>
                    </h4>
                    <p class="blog-card-description">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
                    <div class="ftr">
                        <div class="author">
                            <a href="#"> <img src="https://picsum.photos/id/1005/5760/3840" alt="..." class="avatar img-raised"> <span>Lorem</span> </a>
                        </div>
                        <div class="stats"> <i class="far fa-clock"></i> 10 min </div>
                    </div>
                </div>
            </div>
        </div>
    
    </div>
    <?php
                        //ekleme sonu
    
                    }
    
                } else {
                    echo "<div style=background:red> lsdkjf </div>";
                }
    
            }
    
        }
    
    }
    
    ?>

    The page I need help with: [log in to see the link]

Viewing 10 replies - 1 through 10 (of 10 total)
  • @sumanm I new noticeded that I forget remove last 2 div which are for row and container.When I remove them, posts display like column.However, now I have new problem.I added a effect to image in post and when I add the effect, all posts crash.Can you look at my code to see my mistake? I think it is completly css issue and my css is not good.You can see that posts overflow from their card on the link in my first post

                        <style>
    
                            h1{
                                text-align:center;
                                margin-bottom:50px;
                                margin-top:50px;
                            }
                            .blog-card-blog {
                                margin-top: 30px;
                            }
                            .blog-card {
                                display: inline-block;
                                position: relative;
                                width: 100%;
                                margin-bottom: 30px;
                                border-radius: 6px;
                                color: rgba(0, 0, 0, 0.87);
                                background: #fff;
                                box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
                            }
                            .blog-card .blog-card-image {
                                height: 60%;
                                position: relative;
                                overflow: hidden;
                                margin-left: 15px;
                                margin-right: 15px;
                                margin-top: -30px;
                                border-radius: 6px;
                                box-shadow: 0 16px 38px -12px rgba(0, 0, 0, 0.56), 0 4px 25px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2);
                            }
                            .blog-card .blog-card-image img {
                                width: 100%;
                                height: 100%;
                                border-radius: 6px;
                                pointer-events: none;
                            }
                            .blog-card .blog-table {
                                padding: 15px 30px;
                            }
                            .blog-table {
                                margin-bottom: 0px;
                            }
                            .blog-category {
                                position: relative;
                                line-height: 0;
                                margin: 15px 0;
                            }
                            .blog-text-success {
                                color: #28a745!important;
                            }
                            .blog-card-blog .blog-card-caption {
                                margin-top: 5px;
                            }
                            .blog-card-caption {
                                font-weight: 700;
                                font-family: "Roboto Slab", "Times New Roman", serif;
                            }
                            .fa {
                                display: inline-block;
                                font: normal normal normal 14px/1 FontAwesome;
                                font-size: inherit;
                                text-rendering: auto;
                                -webkit-font-smoothing: antialiased;
                                -moz-osx-font-smoothing: grayscale;
                            }
                            .blog-card-caption, .blog-card-caption a {
                                color: #333;
                                text-decoration: none;
                            }
    
                            p {
                                color: #3C4857;
                            }
    
                            p {
                                margin-top: 0;
                                margin-bottom: 1rem;
                            }
                            .blog-card .ftr {
                                margin-top: 15px;
                            }
                            .blog-card .ftr .author {
                                color: #888;
                            }
    
                            .blog-card .ftr div {
                                display: inline-block;
                            }
                            .blog-card .author .avatar {
                                width: 36px;
                                height: 36px;
                                overflow: hidden;
                                border-radius: 50%;
                                margin-right: 5px;blog-
                            }
                            .blog-card .ftr .stats {
                                position: relative;
                                top: 1px;
                                font-size: 14px;
                            }
                            .blog-card .ftr .stats {
                                float: right;
                                line-height: 30px;
                            }
    
                        </style>
    
             <style>
                    body {
                        background: black;
                    }
    
                    @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 */
    
                    /*---------------*/
                    /***** Ruby *****/
                    /*---------------*/
    
                    figure.effect-ruby {
                        background-color: #17819c;
                    }
    
                    figure.effect-ruby img {
                        opacity: 0.7;
                        -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
                        transition: opacity 0.35s, transform 0.35s;
                        -webkit-transform: scale(1.15);
                        transform: scale(1.15);
                    }
    
                    figure.effect-ruby:hover img {
                        opacity: 0.5;
                        -webkit-transform: scale(1);
                        transform: scale(1);
                    }
    
                    figure.effect-ruby h2 {
                        margin-top: 20%;
                        -webkit-transition: -webkit-transform 0.35s;
                        transition: transform 0.35s;
                        -webkit-transform: translate3d(0,20px,0);
                        transform: translate3d(0,20px,0);
                    }
    
                    figure.effect-ruby p {
                        margin: 1em 0 0;
                        padding: 3em;
                        border: 1px solid #fff;
                        opacity: 0;
                        -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
                        transition: opacity 0.35s, transform 0.35s;
                        -webkit-transform: translate3d(0,20px,0) scale(1.1);
                        transform: translate3d(0,20px,0) scale(1.1);
                    }
    
                    figure.effect-ruby:hover h2 {
                        -webkit-transform: translate3d(0,0,0);
                        transform: translate3d(0,0,0);
                    }
    
                    figure.effect-ruby:hover p {
                        opacity: 1;
                        -webkit-transform: translate3d(0,0,0) scale(1);
                        transform: translate3d(0,0,0) scale(1);
                    }
    
                    @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="col-md-2"> -->
            <div class="blog-card blog-card-blog col-md-4" style="height: 100vh;">
                <div class="blog-card-image">
                   <!--  <a href="#"> <img class="img" src=<?php //the_post_thumbnail(); ?>> </a> -->
    
                    <div class="grid">
                        <figure class="effect-ruby">
                            <img src="http://menlike.club/wp-content/uploads/2015/05/tumblr_nnpudcxIXt1r98nzso1_1280.jpg" alt="img13"/>
                            <figcaption>
                                <h2>Glowing <span>Ruby</span></h2>
                                <p>Ruby did not need any help. Everybody knew that.</p>
                                <a href="#">View more</a>
                            </figcaption>
                        </figure>
                    </div
    
                    <?php the_post_thumbnail('medium', array('class' => 'img')); ?>
                    <div class="ripple-cont"></div>
                </div>
                <div class="blog-table">
                    <h6 class="blog-category blog-text-success"><i class="far fa-newspaper"></i> News</h6>
                    <h4 class="blog-card-caption">
                        <a href="#"><?php the_title(); ?></a>
                    </h4>
                    <p class="blog-card-description">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
                    <p>
                    </p>
                    <p>
                    </p>
                    <p>
                    </p>
                    <p>
                    </p>
                    <div class="ftr">
                        <div class="author" >
                          <!--  <a href="#"> <img src="https://picsum.photos/id/1005/5760/3840" alt="..." class="avatar img-raised"> <span>Lorem</span> </a>
              -->          </div>
                        <div class="stats"> <i class="far fa-clock"></i> 10 min </div>
                    </div>
                </div>
            </div>
    • This reply was modified 2 months, 2 weeks ago by helvetica123.

    @helvetica123
    In your code,it shows multiple time same css. Please remove that css.
    Image is not visible.Please change image and then check for image effect.
    I have just change image and checked,it is showing proper image effect.
    https://ibb.co/4s7q1VK

    Hope this helps 🙂

    @sumanm How did you do, can you explain me again please because I changed

     <!--  <a href="#"> <img class="img" src=<?php //the_post_thumbnail(); ?>> </a> -->
    
                    <?php the_post_thumbnail('medium', array('class' => 'img')); ?>

    to

    <img src="<?php the_post_thumbnail('medium', array('class' => 'img')); ?>"/>

    but still it is crashed

    @helvetica123

    Check your posts,does it have image that is shown in blog post, if not upload image for posts?
    Image shown on blog cards does not exists.
    Once it have image,it will show as the sample link,I have shared with you.
    For now,test it with static image tag and image url and once design is good,
    Change it with this code
    <?php the_post_thumbnail('medium', array('class' => 'img')); ?>

    I couldnt 🙁 I changed and added thumbnails but its still same.I uploaded the php can you edit for me? https://gofile.io/?c=n1BR3z HTML codes are bottom of the file

    @sumanm thanks it works.I will control the codes

Viewing 10 replies - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.