ajshortt

Unless the styles are being added to elements inline, then you’ll just need to adapt your css file to tweak the sizing of elements

@teslaturk, the header has a padding top and bottom. I’ve inspected the site and you’ll need to add this custom css to adapted the header accordingly.

header .container-inner .group {
	padding-top: 10px;		//Was 30px. Change accordingly
	padding-bottom: 10px;	//Was 30px. Change accordingly
}

See if that works

@thetattoedbook, So you first you need to get the id’s of the authors of the latest two posts…

<?php
	$args = array(
	    'numberposts' => 2,
	    'orderby' => 'post_date',
	    'order' => 'DESC',
	    'post_type' => 'post',
	);
?>

<?php $latest_two_posts = wp_get_recent_posts( $args ); ?>

If you var_dump(); the $latest_two_posts variable then you can see what it returns but what we want are the author ids.

Next we now need to loop through these two post info arrays and use the author’s id to find their respective meta data so…

<?php foreach ($latest_two_posts as $post): ?>

		<?php echo get_the_author_meta( 'display_name', $post['post_author'] ); //Name ?>
		<?php echo get_the_author_meta( 'description', $post['post_author'] ); //Name ?>

	<?php endforeach ?>

So we use get_author_meta() with the author’s id to find the relevant info. I have only done two examples but check this link https://codex.www.ads-software.com/Function_Reference/get_the_author_meta to see all of the possible author meta data you can get.

Hope this helps

Can I see your CSS for including the @font-face please? if that is the way you are using the icon font

I know when i started using Ajax, I got a bit lost but make sure you check your browser console to make sure it’s working correctly etc.

But I’m sure you’ll find it amazing when it works!

Pleasure to help you!

Sorry for the massive indentation above haha. need to cut down on the tab size in my text editor

Make sure you have a height set on the div and use

div {
	overflow: scroll;
}

This will add a scroll bar if the nested content has a greater height than the specified height of the container

Does that help?

@begin, you could use some sort of AJAX to load an article into your lightbox element on your page dynamically.

If done right, if ajax or javascript is turned off then it will have a fall back to go to the article’s own page anyway.

I’ve not had chance to read this but by the title, this looks good https://stanhub.com/load-wordpress-post-content-with-ajax-and-jquery/

@theslctd, the problem you have here is that the slideshow sits within a container which has a fixed width of 1020px (on desktop at least).

You could close the <section class="container"> before the slider, make the slider 100% then start a new <section class="container">

Basically the container is restricting nested elements from being 100%

Sorry i meant to say that the above code needs to go into the divider image elements class

@Cyndee, as the blog divider image is inside the loop, you can use the $post_counter variable to also make unique classes for the divider.

<?php echo 'divider-'.$post_counter; ?>

Although I have named the incremented variable as $post_counter normally people name this variable as $i so, like here, can be used in different contexts

So you’re wanting your post to load up into the lightbox like an image would in it’s normal use?

So there is two ways you can select each of the three posts individually. One is to use the css nth-child selector (see https://css-tricks.com/how-nth-child-works/)

For your case you could do something like this

.post-wrapping-div:nth-child(1) {
  //First post
}

.post-wrapping-div:nth-child(2) {
  //Second post
}

.post-wrapping-div:nth-child(3) {
  //Third post
}

I would use this but if you are worried about backwards compatibility with IE8 or less, I think nth-child might not work so I would use php to spit out an incremented class name like so

<!-- BEGIN BLOG CALL-OUT SECTION -->
<div id="blog_section" class="clearfix">
	<div class="blog_posts_container">

		<?php $rp_query = new WP_Query( 'showposts=3' ); ?>

		<?php $post_counter = 0; //Set an initial counter to 0 before the loop ?>

		<?php if ( have_posts() ) : while ( $rp_query->have_posts() ) : $rp_query->the_post(); ?>

			<?php $post_counter++; ?>

			<div class="post-wrapping-div <?php echo 'post-'.$post_counter; ?>">
				<!-- Blog Thumbnail-->
				<div class="blog_image image wow fadeIn" data-wow-duration=".5s" data-wow-delay=".5s"><?php the_post_thumbnail('full'); ?></div>

				<!-- Blog Post Date/time-->
				<p class="post wow fadeIn" data-wow-duration=".5s" data-wow-delay=".6s">
				<span class="post_date">Posted <?php the_time('m/j/y g:i A') ?></span><br />
				</p>

				<!-- Blog Title-->
				<p class="home_blog_title_content wow fadeIn" data-wow-duration=".5s" data-wow-delay=".6.5s">
				<span class="home_text_title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></span><br />
				</p>

				<!-- Blog Content-->
				<div class="home_text_content wow fadeIn" data-wow-duration=".5s" data-wow-delay=".7s">
					<?php the_excerpt(); ?>
					<a href="<?php the_permalink(); ?>">Read More</a></li>
				</div>
			</div> 

		<img class="blog_divider" src="wp-content/themes/CloudPoint_Technology/img/blog_divider.png" class="image">

		<?php endwhile; ?>
		<? endif; ?>
	</div>
</div>

<?php wp_reset_postdata(); ?>
<!-- END BLOG CALL-OUT SECTION-->

Notice the $post_counter has a ++ inside the loop which basically increments it. echoed out with some prefix string and youll have each post with a class post-1, post-2, post-3.

I also put the second to last closing div tag outside of the if posts just incase there isnt any posts resulting in an open div.

Hope that helps

So you don’t want them to stack? Are you just wanting the extra ones hide? So on mobile only show 1, tablet 2, then desktop 3?