Genesis two column layout with ACF

[sim_bas]

Hello to everybody, I'm very new on Genesis Framework, I started developing a child theme but I've some troubles on the layout of a post page.

I need to divide my page into two columns of 50% width, the first one (on the left) should contain some custom fields generated with the plugin Advanced Custom Field, the second one (on the right) should contain the entry_content of the post.
I can get the elements I need in the page but the problem is that the first and the second column doesn't align and the first column remains below the first.
I tried many solutions but I can't find the right way…

Here is my actual result

Here is the php code:

<?php
add_filter( 'body_class', 'sp_body_class' );
function sp_body_class( $classes ) {

   $classes[] = 'casatibuonsante-content';
   return $classes;
}

add_theme_support( 'genesis-structural-wraps', array('header','nav','subnav', 'inner', 'site-inner','footer-widgets','footer') );

// full width content
add_filter( 'genesis_site_layout', '__genesis_return_full_width_content' );

//ACF Fields
add_action( 'genesis_loop', 'info_progetto');
  function info_progetto() {
    if(have_posts()) : while(have_posts()) : the_post(); ?>
      <div class="cb-info-progetto">
        <h1><?php echo get_field('titolo'); ?></h1>
          <h2><?php echo get_field('data'); ?><br></h2>
          <h3><?php echo get_field('info'); ?><br></h3>
      </div>  <?php endwhile; endif; }

// Entry content
remove_action( 'genesis_entry_header', 'genesis_entry_header_markup_open', 5 );
remove_action( 'genesis_entry_header', 'genesis_do_post_title' );
remove_action( 'genesis_entry_header', 'genesis_post_info', 12 );
remove_action( 'genesis_entry_header', 'genesis_entry_header_markup_close', 12 );
remove_action( 'genesis_entry_footer', 'genesis_post_meta' );

genesis();

And here is the css:

.casatibuonsante-content .site-inner {
	background-color: yellow;
	padding: 0;
	position: relative;
	height: auto;
}

 .cb-info-progetto {
	width: 45%;
	max-width: 45%;
	background-color: green;
	position: relative;
}

.casatibuonsante-content .entry {
	background: red;
	width: 50%;
	position: relative;
	left: 50%;
}

Thanks a lot to anyone can help!
Simone

http://localhost

[Brad Dalton]

Use column classes https://gist.github.com/studiopress/5700003#file-two-columns-html

---

Tutorials for StudioPress Themes.

[sim_bas]

Hello Brad, thank you for your answer. I'm looking for a soluction in the way you suggested, the problem now is that the columns not floatings but stay one below another…

Here is the code I'm using now:

/* ACF */
add_action( 'genesis_before_entry_content', '\contenuto_sx', 1 );

  function contenuto_sx() {
    echo '<div class="one-third" style="background:pink;">';
    echo get_field('titolo');
    echo get_field('data');
    echo get_field('info');
    echo '</div>';

  }

/* entry-content */
add_filter ('genesis_attr_entry-content', '\contenuto_dx');
  function contenuto_dx ( array $attributes ) {
    $attributes['class'] .= ' one-half';

    return $attributes;
  }

remove_action( 'genesis_entry_header', 'genesis_entry_header_markup_open', 5 );
remove_action( 'genesis_entry_header', 'genesis_do_post_title' );
remove_action( 'genesis_entry_header', 'genesis_post_info', 12 );
remove_action( 'genesis_entry_header', 'genesis_entry_header_markup_close', 12 );
remove_action( 'genesis_entry_footer', 'genesis_post_meta' );

And here is the result I get…

[sim_bas]

Hello Brad, thank you for your answer, I'm looking for a solution in the way you suggested, the problem is that columns does not floatings and remains one below the another.
Here is the code of the solution that I'm trying now:

// full-width layout
add_filter( 'genesis_site_layout', '__genesis_return_full_width_content' ); */

/* ACF  */
add_action( 'genesis_before_entry_content', '\contenuto_sx', 1 );

  function contenuto_sx() {
    echo '<div class="one-third" style="background:pink;">';
    echo get_field('titolo');
    echo get_field('data');
    echo get_field('info');
    echo '</div>';
  }

/* entry-content */ 
add_filter ('genesis_attr_entry-content', '\contenuto_dx');
  function contenuto_dx ( array $attributes ) {
    $attributes['class'] .= ' one-half';
    
    return $attributes;
  }

remove_action( 'genesis_entry_header', 'genesis_entry_header_markup_open', 5 );
remove_action( 'genesis_entry_header', 'genesis_do_post_title' );
remove_action( 'genesis_entry_header', 'genesis_post_info', 12 );
remove_action( 'genesis_entry_header', 'genesis_entry_header_markup_close', 12 );
remove_action( 'genesis_entry_footer', 'genesis_post_meta' );

And here is a screenshot of the result:

[Brad Dalton]

The 1st column in the row must use one-third first as indicated in the link i posted.

Otherwise, you'll need a custom solution coded for your specific needs.

---

Tutorials for StudioPress Themes.

[sim_bas]

I tried to insert the "first" class on the first column but it doesn't work (it justs eliminate the left-margin of the pink div).

If this could help someone, I resolved the issue inserting the div with custom fields in entry-content (instead of before entry-content) adding the classes for the first column of the grid (in my case "one-half" and "first"). Then I styled instead of the whole entry content just only ".entry-content p" giving it the same values of one-half (second column of the grid) should have like this:

.myclass .entry-content p { 
	float: right;
	width: 48.717948717948715%; //same value of one half
	margin-left: 2%;
}

Then I custom style ".myclass .entry-content p" for devices with media queries
It is a little bit tricky but it works…

[Author]

Posts