How can i display 4 post with different css styles ?

How are you adding classes? May be post the relevant code.

The CSS has to match the HTML.
When you say “didn’t work”, what exactly do you mean?

• The post was not displayed?
• The post class was not what you wanted?
• The styles are not loaded?
• The styles did not apply to the posts?

@joyously posts displayed but the different the styles didn’t apply to the post

It doesn’t seem to be a WordPress question. You can research all over the web on how to make your CSS apply to the HTML that you have.

@joyously The css is working perfectky without WordPress but when i try to query such that it display post dynamically it stucks

here is the code

<div class="uk-child-width-1-2@s uk-grid-match uk-height-medium" uk-grid>
<?php 
	$args = array(
		'post_type' => 'artwork',
		'posts_per_page' => 4
	);
	$_artworks = new WP_Query($args);

	$classes1 = array(
		0=>'uk-width-expand@s',
		1=>'uk-width-1-3@s',	
	);

	$classes2 = array(
		0=>'uk-position-bottom',
		1=>'uk-position-top',	
	);
	$i = 0;
?>
<?php if($_artworks -> have_posts()): ?>
<?php while($_artworks -> have_posts()):
        $_artworks -> the_post();
?>
	<article id="post-<?php the_ID(); ?>"<?php post_class($classes1[$i++%2]); ?>>
	     <div class="uk-card uk-card-hover uk-card-body" style="background: url(<?php the_post_thumbnail_url(); ?>); background-size: cover">
		<div class="uk-overlay uk-overlay-primary <?php post_class($classes2[$i++%2]); ?>">
		      <h3 class="uk-card-title"><?php the_title(); ?></h3>
		      <p><?php the_excerpt(); ?></p>
		</div>
	    </div>
        </article>
<?php endwhile; ?>
<?php endif; ?>	
</div>

and this is what i expect as results
file:///home/kevine/Pictures/xoutput.png
but this is what i get as result
file:///home/kevine/Pictures/aoutput.png

• This reply was modified 4 years, 1 month ago by gunkev.
• This reply was modified 4 years, 1 month ago by gunkev.

We can’t see images on your computer. You have to load them somewhere and link to it.

Your code has a few issues.
– The <article> line needs a space between the id and the class.
– You are calling post_class() twice for one post. You should just put the classes you want on the second one, without calling post_class().
– You are incrementing $i each time it is used, so article get the 0 value while the later div gets the 1 value.
– Excerpts can be manually written, with HTML included, so putting the_excerpt() inside <p> tags could produce invalid HTML.

Use your browser’s View Source command to see if it the HTML you generate is right, before you complain that the CSS doesn’t work.

Also, you need to reset_post_data after your loop, or other things on the page would be using the wrong data.

I didn’t say the css is not working. I figured out the solution. The post where not display the way I wanted was because I set posts_per_page to 4. when I set it to 2 the post everything was okay. Know i just have to figure out how i will set it to 4 then triggered the third post to display in the next row with uikit

Anyway thanks for your support