Displaying posts in a WordPress loop with a unique and unconventional CSS design

My issue with the WordPress loop is that the posts are displaying oddly. Originally, when I had 3 posts, they appeared inline as expected. However, now that I have 5 posts, they are showing up in a strange way (refer to the image linked below). The arrow indicates how I want the posts to be displayed.

Below is the HTML and PHP code for the page:

<div class="container">
    <div class="row">
            <?php

               $args1 = array( 'post_type' => array('case_studies'), 'order' => 'DESC', 'posts_per_page' => 30, 'orderby' => 'date' );
               $loop = new WP_Query( $args1 );

               while ( $loop->have_posts() ) { 

               $loop->the_post();

               $feat_image = wp_get_attachment_url( get_post_thumbnail_id($loop->ID));

            ?>

            <div class="col-sm-4">
                <a href="<?php the_permalink() ?>" class="blog_blocks">
                    <div class="b_image">
                        <img src="<?php echo get_the_post_thumbnail_url(); ?>"/>
                    </div>
                    <div class="b_h_sec">
                    <h2><?php the_title(); ?></h2>
                    <p><?php echo wp_strip_all_tags( get_the_excerpt(), true ); ?></p>
                    <span class="r_m">Read More</span>
                    </div>
                </a>
            </div>

            <?php } ?>

            <?php wp_reset_postdata(); ?>
    </div>
</div>

You can view the actual page here. Maybe inspecting the CSS in Chrome tools will provide some insight.

Thank you :)

Answer №1

These blocks are arranged with float: left. The third block is slightly shorter than the one before it, causing the fourth block to be positioned next to the second. This behavior is typical of floated elements.

To address this issue, one option is to set fixed heights for all blocks. Another solution involves adding clear: left to the fourth block, but this method lacks responsiveness as it will always move the block to a new line regardless of available space.

A more reliable approach is to utilize display: flex on the container with flex-wrap: wrap included.

Answer №2

Make sure to update your div :

<div class="row">

Insert a "d-flex" class into it :

<div class="row d-flex">

Now, apply the following CSS properties to the d-flex class :

.d-flex {
    display: flex;
    flex-wrap: wrap;
}

That's it! Enjoy the updated design ;)

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the process for implementing hover transitions on link elements?

I am trying to incorporate a transition effect for my links. Essentially, I want the text-decoration (which is currently set to underlink) to gradually appear. Unfortunately, my previous attempt at achieving this has been unsuccessful: #slink{ transit ...

Blurring the edges of a div container

I have successfully faded the top of a div, but I am struggling to achieve the same effect for the bottom. I attempted to reverse the CSS properties used for fading the top, but it does not seem to be working as expected. HTML: <div class="container-c ...

Reaching SVG with CSS

Is it possible to target SVG elements with CSS? In older versions of IE, they display like broken images and I want to hide them using modernizr. I'm looking for a solution like the following... .no-svg object[type=svg] { display:none; } I have be ...

How can I ensure that my jQuery code only executes after the mobile CSS has been loaded

When it comes to loading my mobile-only CSS, I typically use a media query similar to: <link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 480px)" href="/includes/css/mobile.css" /> However, in addition to these CSS mod ...

Concealing axis lines within the initial circular grid or opting not to include them

Is there a way to incorporate some whitespace within the center circle of the radar chart? I'm aiming for the axis to commence at 1 radius (the initial circular line) or perhaps have the stoke set to 0 for the primary radius. Any assistance would be g ...

Adapting the column width to display or hide content with CSS styling

I have a row with 2 columns. The left column contains my main content and the right column is a chatroom. I would like users to be able to minimize and open the chatroom, which I already know how to do. However, when the chatroom is open, I want the left ...

What crucial element am I overlooking in the React Transition Group Component while implementing it for a carousel design?

I'm trying to add a feature to my Carousel where the opacity changes between images. When clicking on the icons, the images should transition smoothly. I've been using React Transition Group, but for some reason, it's not working as expected ...

Javascript's second element does not trigger a click event with similar behavior

I'm currently facing an issue with displaying and hiding notification elements based on user interaction. My goal is to have multiple popup elements appear when the page loads. Then, when a user clicks the ".alert-close" element within one of the popu ...

What's the best way to incorporate necessary styles into text using particular fonts?

Is there a way to set letter spacing and word spacing for text on my website with the font 'classylight'? Adding classes to each post in the site map seems like a lengthy process. To save time, I attempted to use the attribute*=style property to ...

The CSS class is not properly implemented in the React component

I value your time and assistance. I have spent many hours trying to solve this issue but seem unable to reach a resolution. Here is the React component in question: import styles from './style.scss'; class ButtonComponent extends React.Compone ...

What are some ways to incorporate Chakra UI with the after pseudo-class to generate a dark overlay in my video's foreground? (Specifically in the Hero section)

I am working on creating a layer effect in front of a video using Next.js and Chakra UI. I have provided an example in Figma: Here is the code snippet: function Hero() { const videoRef = useRef(); useEffect(() => { setTimeout(()=>{ ...

What are the ways to ensure my query columns fill the entire page space?

Currently, when I execute a query, it retrieves the correct information. However, I want to make my columns span across the entire page instead of being centered in the middle with empty space on the sides. Is there a way to expand the columns? Below is t ...

Adjusting the width of columns in a table

Previously in Bootstrap 3, I was able to use col-sm-xx on the th tags within the thead to resize table columns as needed. However, this functionality is no longer available in Bootstrap 4. How can I achieve a similar effect in Bootstrap 4? <thead> & ...

Creating a responsive layout in HTML/CSS where the div element expands to fill the entire vertical space of its parent

Looking for assistance in creating a webpage layout like the one shown in this fiddle... http://jsfiddle.net/jeljeljel/5BSva/ I need the vertical line on the left side navigation tab to extend all the way down to the footer at the bottom of the page. Th ...

Issues with SVG Image Mask in Firefox and IE: How to Fix Them

Creating a mask with a PNG (black circle, transparent background) and using -webkit-mask-image:url(images/mask.png) has been easy for browsers like Chrome. However, I've been encountering significant difficulties in getting the mask to display properl ...

Difficulty Aligning Header Elements - Combining Navigation and Logo on the Same Line

I am currently facing an issue with positioning a logo and navigation links within a <header> element. When I apply the CSS property text-align:center;, the logo aligns to the center on one line while the navigation links appear on another line direc ...

Guide to applying Bootstrap styles to a specific section of an HTML document

What can I do to ensure that the Bootstrap library used by the main app does not affect the styling of my controls when integrating my web application inside the main app? I want to maintain the current styles of my controls without any interference from ...

How to design a trapezium shape using CSS and HTML

While there are many tutorials available for creating Trapezoids with CSS3, I am interested in making a four-sided shape where none of the sides are parallel (trapezium), similar to the one shown in the image below. Can this be achieved? ...

There seems to be an issue with the CSS header alignment as the logo is not properly positioned using a top margin of -20px

My goal is to create a header bar that includes an image, a title, and a menu car. I want the bar to be displayed after scrolling 50px down, and I also want the image to be positioned slightly above the wrapping div, showing a bit of it in the top 50px. Ri ...

What are the steps for adding a JSON file to a GitHub repository?

Could someone lend a hand with my GitHub issue? I recently uploaded my website to a GitHub repository. The problem I'm facing is that I have a JSON file containing translations that are being processed in JavaScript locally, and everything works fine ...