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="https://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>
Viewing 10 replies - 1 through 10 (of 10 total)
- The topic ‘My post card which bootstrap 4 made doesnt seem as column’ is closed to new replies.