Recent Posts image position not lining up properly
-
Hello,
On the main page of my site, at the bottom, there is a place for “Recent Posts.” The images are currently lining up directly underneath each other and touching with a gap between the last two images. I would like for the images to be on the left and the wording: date, title, and excerpt to be on the right.
I’m not sure how to fixing this issue and am very new to coding. My site is: https://www.aimeemars.com
I would greatly appreciate any help. I’ve been searching the forum and trying to implement different codes but can’t find anything that works.
Thanks!
Here is my code:
<div class=”container”>
<div class=”bottom-left”>
<div class=”recent-posts2″><h1 class=”seamist”>Recent Posts</h1>
<?php
$postslist = get_posts(‘showposts=4&cat=$category&offset=1’);
foreach ($postslist as $post) :
setup_postdata($post);
?>
<div class=”entry”>
<div class=”thumbnail”>
<?php
if(has_post_thumbnail()) {
the_post_thumbnail();
} else {
// show a default image if no featured image is specified
echo ‘‘;
}
?>
</div><div class=”date2″>
<?php the_date(); ?>
</div><h3>“><?php the_title(); ?></h3>
<?php the_excerpt(); ?>
</div>
<?php endforeach; ?><div class=”recent-posts-button”>
</div></div>
</div></section>
</div>
<div class=”bottom-right”>
<div class=”sidebar-bottom”>
<?php get_template_part(‘sidebar’); ?>
</div>
</div>and here is the CSS:
.container {
margin-left: auto;
margin-right: auto;
text-align: center;
margin-top: 75px;
width: 1050px;
max-width: 85%;
border-top: 1px solid #6D6E70;
}.bottom-left {
margin-right: auto;
margin-left: auto;
text-align: center;
}.bottom-right {
margin-right: auto;
margin-left: auto;
text-align: center;
}.recent-posts2 {
width: 575px;
padding-right: 50px;
float: left;
display: inline;
}.recent-posts2 h1 {
font-family: ‘Lato’, sans-serif;
text-transform: uppercase;
font-size: 16pt;
letter-spacing: 17px;
font-weight: 400;
color: #B9CBB7;
padding-top: 5px;
padding-bottom: 5px;
text-align: left;
margin-bottom: 50px;
}.date2 {
font-family: ‘Lato’, sans-serif;
text-transform: uppercase;
text-align: left;
font-size: 8pt;
letter-spacing: 4px;
font-weight: 300;
color: #B9CBB7;
}.recent-posts2 h3 {
font-family: ‘Lato’, sans-serif;
text-transform: uppercase;
text-align: left;
font-size: 12pt;
letter-spacing: 5px;
font-weight: 300;
color: #B9CBB7;
}.recent-posts2 p {
margin-bottom: 75px;
font-family: ‘Amiri’, serif;
font-size: 16px;
font-weight: 400;
font-style: italic;
text-align: justify;
text-align-last: start !important;
color: #989898;
}.recent-posts2 .thumbnail {
float: left;
display: inline;
width: 300px;
height: 300px;
margin-right: 25px;
}.recent-posts2 .recent-posts-button {
float: left;
display: inline;
margin-bottom: 55px;
}
-
hi aemars if you use this to align your images you should remove the margin bottom of your .recent-post2 p
.recent-posts2 .entry::after {
display: block;
clear: both;
content: ” “;
}
.recent-posts2 .entry {
margin: 0 0 25px;
}
———————–this is to make the spaces of the entry to be even. find your css and remove the commented line
.recent-posts2 p {
/* margin-bottom: 75px; remove this line*/
font-family: ‘Amiri’, serif;
font-size: 16px;
font-weight: 400;
font-style: italic;
text-align: justify;
text-align-last: start !important;
color: #989898;
}oh now i see why its not working. you already put the css but because the quotes are automatically change by post reply here on the forum thats why its not working. check this image so you can understand what i mean. https://www.screencast.com/t/p7zKUFfwiQW
you should replace it with this ” “
- The topic ‘Recent Posts image position not lining up properly’ is closed to new replies.