Archived topic
Columns
11 replies · Started by Rob on June 18, 2022
Hi there
Before you moved away from unsemantic columns I used to be able to write columns that were 50%, 25% etc to obtain responsiveness.
I am using GenerateBlocks on pages but need to edit a single page.php and add html where I can add 2 columns of equal width.
Is there a new CSS classes I can use for this?
Rob.
Hi Rob,
Not sure if I fully understand.
Are you using the Grid block from GB?
https://docs.generateblocks.com/article/grid-overview/
If so there should be no need for any CSS at all:
https://docs.generateblocks.com/article/container-overview/#layout-%E2%80%93-grid-item
I have tried using GB Blocks but it doesn’t seem to be working on the Single Template. I think with the way the plug-in works I will need to edit their php files within the child theme. I just need to be able to add html into 2 columns.
I used to add div classes called grid 100, grid-50 and grid-33 a couple of years ago.
I have tried using GB Blocks but it doesn’t seem to be working on the Single Template. I think with the way the plug-in works I will need to edit their php files within the child theme. I just need to be able to add html into 2 columns.
I used to add div classes called grid 100, grid-50 and grid-33 a couple of years agog.
In that case you would just want to use Flexbox:
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox
You can also create a test page and add a grid block then inspect the structure and CSS there as GB is using Flexbox :)
Ahh ok, thanks Leo
No problem :)
Hi, me again!
Hi there,
I have copied the GiveWP into GP child theme, inside "give > single-give-form > content-single-give.php".
Inside is the following PHP (attached file).
I have added the following code, simple Grid with 2 columns (66% and 33%).
<div class="form-grid">
<div class="form-column-left">
<h1>Left</h1>
</div>
<div class="form-column-right">
<h1>Right</h1>
</div>
I have then placed the code for the GiveWP form in the right div.
It all seems to work, but the outer div, thats being pulled from GP isnt 100%, looking at the HTML of a Test page, I can see a few divs that are not there in my custom page. I assume its because I havent told my file to render those divs, but I am unsure what I need to enter there.
Would you be able to help at all?
I have tried creating this single template within GeneratePress Block Element and assigning "All Donations Forms" as my target. But it doesnt do anything at all.
Rob.
<?php
/**
* The template for displaying form content in the single-give-form.php template
*
* Override this template by copying it to yourtheme/give/single-give-form/content-single-give-form.php
*
* @package Give/Templates
* @version 1.0
*/
if ( ! defined( 'ABSPATH' ) ) {
exit; // Exit if accessed directly.
}
/**
* Fires in single form template, before the form.
*
* Allows you to add elements before the form.
*
* @since 1.0
*/
do_action( 'give_before_single_form' );
if ( post_password_required() ) {
echo sprintf('%s', get_the_password_form());
return;
}
?>
<div class="form-grid">
<div class="form-column-left">
<h1>Left</h1>
</div>
<div class="form-column-right">
<h1>Right</h1>
<div id="give-form-<?php the_ID(); ?>-content" <?php post_class(); ?>>
<?php
/**
* Fires in single form template, before the form summary.
*
* Allows you to add elements before the form summary.
*
* @since 1.0
*/
do_action( 'give_before_single_form_summary' );
?>
<div class="<?php echo apply_filters( 'give_forms_single_summary_classes', 'summary entry-summary' ); ?>">
<?php
/**
* Fires in single form template, to the form summary.
*
* Allows you to add elements to the form summary.
*
* @since 1.0
*/
do_action( 'give_single_form_summary' );
?>
</div>
<!-- .summary -->
<?php
/**
* Fires in single form template, after the form summary.
*
* Allows you to add elements after the form summary.
*
* @since 1.0
*/
do_action( 'give_after_single_form_summary' );
?>
</div><!-- #give-form-<?php the_ID(); ?> -->
<?php
/**
* Fires in single form template, after the form.
*
* Allows you to add elements after the form.
*
* @since 1.0
*/
do_action( 'give_after_single_form' );
?>
</div>
</div>
Hi Rob,
Unfortunately this isn't something we can help with in the support forum here.
Have you checked with GiveWP's support team to see if they can help you to achieve what you have in mind?
Yeah didn’t think so worth a shot. GiveWp don’t help either.
You could always try a forum like this:
https://wordpress.stackexchange.com/