Hi, @tevanduyne! There are some hidden elements on top of the first item on the page:
Are you using any themes or plugins?
This was a custom theme. I’m not sure why there are hidden elements only when I copy the link with a filter in place. There aren’t any plugins for the projects page.
Here is the code below the filters:
?>
<div class=”media-box <?php echo $project_region; ?> <?php echo $project_types; ?> <?php echo $project_services; ?> <?php echo $project_cats; ?> “>
<div class=”media-box-image”>
<div data-width=”268″ data-height=”268″ data-thumbnail=”<?php echo the_post_thumbnail_url( $post->ID, ‘project-landing-thumb’ ); ?>”></div>
</div>
<div class=”media-box-content”>
<div class=”media-box-title”>“><?php the_title(); ?></div>
<?php if(get_field(‘project_location’)) { ?>
<div class=”media-box-date”>
<?php the_field(‘project_location’); ?>
</div>
<?php } ?>
<?php if(get_field(‘project_owner’)) { ?>
<div class=”media-box-date”>
<?php the_field(‘project_owner’); ?>
</div>
<?php } ?>
</div>
</div>
<?php
$countTwo++; }
wp_reset_postdata();
} else {
// no posts found
}
?>
@tevanduyne! I looked a bit more into your website styles. When you select an option from the filter, the filtered-out posts get a hidden-media-boxes-by-filter
class added to them. This class is probably then used in JavaScript to add inline styles, including display: none;
. I suspect that this script doesn’t run on page load, so the display: none
is not added inline to those posts. They still have other styles added to them, including opacity:0
and some absolute positioning, which place them on top of the first post, and make them invisible.
I would probably add a global CSS rule like .hidden-media-boxes-by-filter {display:none;}
to make sure that those media-boxes don’t interfere with your page.