two column layout containing php

Hi there,

That code looks like it should work. However, the Element on the page you linked me to seems to be using a different Element. Are you sure the one that applies to that category has the code?

No, it was the right element. I had just left in an extra ?> that was breaking the php.

Now you should be able to see the columns issue. What I want is something like this:

text map
gallery head and grid (no posts right now, though)
post head and grid

Hi there,

so the description is jumping into the second column. You would be able to share the entire code you are using for you Category Intro? When adding code to the forum, after you have pasted it in can you highlight it and hit the Code button :)

Here's the whole Element:

<div id="category_intro">
<?php 
get_header(); 

//* get the current taxonomy term and load description and map*//
$term = get_queried_object(); ?>

<div class="grid-50 tablet-grid-50 mobile-grid-100 first-column">
   <?php $description = get_field('country_description', $term); ?>
</div>
<div class="grid-50 tablet-grid-50 mobile-grid-100 second-column">
  <?php $description = get_field('country_description', $term);
$map = get_field('country_map', $term);
echo "<p>" . $description . "</p>";

echo do_shortcode( ' '. $map .' ' ); ?>
</div>
	

	
	
<div id=cathead>
	
<h2 class="border-heading">
				<?php
						foreach((get_the_category()) as $category) {
						echo $category->cat_name . ' ';
					}
				?>
		Photo Galleries
		</h2>
<?php
	$terms = get_the_terms( get_the_ID(), 'category' );

if ( !empty( $terms ) ){
    // get the first term
    $term = array_shift( $terms );
    $term_slug = $term->slug;
}

wpsp_display( 26824, 'tax_term="' . $term_slug . '"' );
 ?>	
</div>

<div id=cathead>
<h2 class="border-heading">
				<?php
						foreach((get_the_category()) as $category) {
						echo $category->cat_name . ' ';
					}
				?>
		Posts by Topic
		</h2>
</div>

This <div id="category_intro"> looks like it is missing the closing </div> which should come after the second column.

It was--stupid mistake -- thanks!

But that didn't fix the layout.

So i assume the first row is the Description (in first column) and map (in second column). If thats the case then move this:

echo "<p>" . $description . "</p>";

from the second column and place it in the first column so the first columns markup looks like this:

<div class="grid-50 tablet-grid-50 mobile-grid-100 first-column">
    <?php $description = get_field('country_description', $term); ?>
    echo "<p>" . $description . "</p>";
</div>

That worked well, except that the next div is still pulling up to the right.

https://theslowroad.org/category/destinations/south-america/ecuador/

The most recent code:

<div id="category_intro">
	//* get the current taxonomy term and load description and map*//
 <?php 
  get_header(); 

  $term = get_queried_object(); 
	?>

  <div class="grid-50 tablet-grid-50 mobile-grid-100 first-column">
   <?php $description = get_field('country_description', $term); 
	echo "<p>" . $description . "</p>";
	?>
  </div>
	
  <div class="grid-50 tablet-grid-50 mobile-grid-100 second-column">
  <?php $description = get_field('country_description', $term);
  $map = get_field('country_map', $term);
  echo do_shortcode( ' '. $map .' ' ); 
	?>
  </div>
</div>

<div id=cathead>
	
  <h2 class="border-heading">
				<?php
						foreach((get_the_category()) as $category) {
						echo $category->cat_name . ' ';
					}
				?>
		Photo Galleries
		</h2>
  <?php
	$terms = get_the_terms( get_the_ID(), 'category' );

   if ( !empty( $terms ) ){
    // get the first term
    $term = array_shift( $terms );
    $term_slug = $term->slug;
    }

    wpsp_display( 26824, 'tax_term="' . $term_slug . '"' );
     ?>	
</div>

<div id=cathead2>
  <h2 class="border-heading">
				<?php
						foreach((get_the_category()) as $category) {
						echo $category->cat_name . ' ';
					}
				?>
	Posts by Topic
	</h2>
</div>

Try adding this CSS:

#category_intro {
    overflow: auto;
}

That's it!

Thank you so much!

Awesome - glad to be of help!