This topic contains 3 replies, has 1 voice, and was last updated by Porter 6 years, 11 months ago.
-
Posts
-
I'm trying to create a 3 column custom blog page (just for my articles, the only "post" category on my site), and need a bit of guidance on how to go about it. Essentially, I want the same design as seen here. As you can see, it's simply 3 photos photos per row, with the excerpt below the image. I feel like this is likely quite easy to do, but I'm unsure of if there are any classes already available I can use, and how exactly I would apply those classes within my custom loop. Note, it's important this page is responsive.
If anyone could push me in the right direction, I can likely write most of the code myself. Thanks for the help 🙂
anightinburlington.com/articles
I've now nearly got what I was looking for (just used the one-third class with a div around all my posts in the loop), but the one-third class isn't quite fitting - two columns fit, and one is moved below. I assume this is because of a margin, and why the "first" class exists, but since I'm in a loop, there will be many "firsts" (every 3rd to be exact). I COULD iterate a variable and apply a different div on every first, but then there's the problem of responsiveness for when the browser isn't full size, or on mobile devices where there might only be 1 column going down.
Ideally, I think I just need to center all 3 columns, rather than mess with "first" at all, but I'm not quite sure what's going on there, and need to get to the bottom of it.
I worked on this a bit today, and I nearly have what I want, just one small thing. When I change the browser size to fit only 1-2 columns, rather than show only 1-2 for the width, all 3 shrink in size. How do I make it so that each column retains the original 1/3 area, and doesn't shrink when the windows is smaller? This is what I have thus far:
PHP:
function custom_do_page_content() { $args = array( 'category_name' => 'articles', 'orderby' => 'post_date', 'order' => 'DESC', 'posts_per_page'=> '100', ); $loop = new WP_Query( $args ); if( $loop->have_posts() ) { // loop through posts while( $loop->have_posts() ): $loop->the_post(); ?><div class="one-third-centered full-width-content"><?php echo(the_post_thumbnail()); ?><h3><?php echo(get_the_title()); ?></h3><?php echo(get_post_meta(get_the_ID(), '_yoast_wpseo_metadesc', true)); ?></div><?php endwhile; } wp_reset_postdata(); }CSS:
.one-third-centered { width: 31.33%; margin: 1%; padding: 1%; float: left; text-align: left; background: #181818; border: 1px solid #282828; }
All fixed, I just added some responsive code to my 800px section:
.one-third-centered { width: 96%; margin: 2%; padding: 2%; }I even got the desired hover effect I was going to ask about next, by adding:
a img:hover { opacity: 0.7; }It's a dark hover rather than white, because of my background, but I could obviously change that to be white for that effect if desired.
It seems the student has surpassed the master - sorry for the quadra-post 😀
The topic ‘3 Column Custom Blog Page’ is closed to new replies.