Posts overlapped and white space below

  • I’m trying to make a page of posts using the Radcliffe theme.
    The page is working, indeed, but not the way it should – the posts are overlapping, one on another, so I see every one of my six posts overlapped in the same place, below a lot of white space and, in the end, a footer.

    Could you please take a look at my php code and tell me if there is any mistake?
    I’m combining my theme page with codex’s example of page of posts.

    <?php get_header(); ?>

<div class="content">

	        <?php
        /* The loop: the_post retrieves the content
         * of the new Page you created to list the posts,
         * e.g., an intro describing the posts shown listed on this Page..
         */
        if ( have_posts() ) :
            while ( have_posts() ) : the_post();

              // Display content of page
              get_template_part( 'content', get_post_format() );
              wp_reset_postdata();

            endwhile;
        endif;

        $paged = (get_query_var('paged')) ? get_query_var('paged') : 1;

        $args = array(
            // Change these category SLUGS to suit your use.
            'category_name' => 'testy',
            'paged' => $paged
        );

        $list_of_posts = new WP_Query( $args );
        ?>
        <?php if ( $list_of_posts->have_posts() ) : ?>
			<?php /* The loop */ ?>
			<?php while ( $list_of_posts->have_posts() ) : $list_of_posts->the_post(); ?>
				<?php // Display content of posts ?>
				<?php get_template_part( 'content', get_post_format() ); ?>
			<?php endwhile; ?>

		<div class="posts">

			<?php
			$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
			$total_post_count = wp_count_posts();
			$published_post_count = $total_post_count->publish;
			$total_pages = ceil( $published_post_count / $posts_per_page );

			if ( "1" < $paged ) : ?>

				<div class="page-title section small-padding">

					<h4 class="section-inner"><?php printf( __('Page %s of %s', 'radcliffe'), $paged, $wp_query->max_num_pages ); ?></h4>

				</div>

				<div class="clear"></div>

			<?php endif; ?>

		    	<?php while (have_posts()) : the_post(); ?>

					<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

			    		<?php get_template_part( 'content', get_post_format() ); ?>

		    		</div> <!-- /post -->

		        <?php endwhile; ?>

			<?php if ( $wp_query->max_num_pages > 1 ) : ?>

				<div class="archive-nav">

					<?php echo get_next_posts_link( '? ' . __('Older posts', 'radcliffe')); ?>

					<?php echo get_previous_posts_link( __('Newer posts', 'radcliffe') . ' ?'); ?>

					<div class="clear"></div>

				</div> <!-- /post-nav archive-nav -->

			<?php endif; ?>

		<?php endif; ?>

	</div> <!-- /posts -->

</div> <!-- /content section-inner -->

<?php get_footer(); ?>

    P.S. every post have a thumbnail and an image inside.

Viewing 9 replies - 1 through 9 (of 9 total)
  • Thread Starter kicia

    (@kicia)

    this is the css of this page content, maybe someone could take a look?

    but I think the problem is somewhere in php code, I haven’t touch this theme’s css since I’ve installed it

    .post { position: relative; }

.posts .post.has-featured-image { min-height: 266px; }

/* featured media */

.featured-media {
	position: relative;
	display: block;
	width: 100%;
	max-height: 682px;
}

a.featured-media:hover { opacity: 0.75; }

.featured-media > img {
	visibility: hidden;
	display: block;
	margin: 0 auto;
}

.media-caption-container {
	position: absolute;
	bottom: 5%;
	right: 5%;
	left: 5%;
	text-align: center;
}

.media-caption {
	display: inline-block;
	padding: 9px 12px;
	border-radius: 3px;
	background: #444;
	background: rgba(17,17,17,0.5);
	font-size: 0.8em;
	line-height: 120%;
	font-weight: 400;
	font-style: italic;
	color: #fff;
}

.media-caption:hover { background-color: rgba(17,17,17,0.75); }

/* post header */

.post-header { display: block; }

a.post-header { position: static; }
a.featured-media + a.post-header { position: absolute; }

a.post-header {
	background: #BFBFBF;
	background: rgba(17,17,17,0.35);
	bottom: 0;
	left: 0;
	right: 0;
	color: #FFF;
	padding-left: 10px;
	padding-right: 10px;
}

a.post-header:hover {
	background: #333;
	background: rgba(17,17,17,0.75);
	color: #FFF;
}

.post.no-featured-image a.post-header { position: static; }
.post.no-featured-image a.post-header:hover { background: #333; }

a.post-header:hover .post-title { color: #CA2017; }

.post-meta-top {
	text-transform: uppercase;
	color: #FFF;
	font-size: 0.9em;
	letter-spacing: 1px;
	font-weight: bold;
	text-align: center;
	margin-bottom: 30px;
	text-shadow: 1px 1px 0 rgba(0,0,0,0.1);
}

.post-meta-top .sep {
	color: #CCC;
	margin: 0px 5px;
	font-weight: 400;
}

a.post-header .post-meta-top .sep {
	color: #fff;
	color: rgba(255,255,255,0.5);
	text-shadow: none;
}

.sticky .post-meta-top { display: block; }

.post-title {
	font-family: 'Abril Fatface', serif;
	font-size: 3em;
	text-transform: uppercase;
	letter-spacing: 1px;
	text-align: center;
}

a.post-header .post-title {
	max-width: 90%;
	margin-left: auto;
	margin-right: auto;
	text-shadow: 2px 2px 0 rgba(0,0,0,0.1);
}

    Hi kicia,

    Can you please post the url where this is happening?

    Thanks,
    bannorb

    Thread Starter kicia

    (@kicia)

    Hi, of course, here it is.

    the issue seems to be with the usage of position: absolute; in some of the styles, possibly in connection with the html structure of your page template;

    example:
    a.featured-media + a.post-header { position: absolute; }

    as this is from the original CSS of the theme, please post in https://www.ads-software.com/support/theme/radcliffe to get more specific suggestions.

    Thread Starter kicia

    (@kicia)

    thank you Alchymyth.
    position: absolute indeed causes overlapping.
    but still there is the question, why do the images not show?

    I see theme’s author don’t read this forum, I wrote him an email, but with no answer yet.

    Hi kicia,

    Does every post have a featured image?

    Thanks,
    bannorb

    Thread Starter kicia

    (@kicia)

    not every post, but at least two of them. One image is of a very big size.

    edit: every post has a featured image.

    Thread Starter kicia

    (@kicia)

    ok, I find out that in the original css code featured img is set to visibility: hidden;, so I changed it to visible and the images displayed.

    the page still doesn’t look as in the original template, title panels should cover images partially and they don’t.
    but I’m a bit closer to a good look.

    Thread Starter kicia

    (@kicia)

    everything works fine!!!
    I found some issues in original theme css.

    thank you guys for your posts.

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Posts overlapped and white space below’ is closed to new replies.