[Resolved] 2 columns

Home Forums Support [Resolved] 2 columns

Home Forums Support 2 columns

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #373433
    jean

    Hello,
    I have a big problem with a php code that I use in my current theme. This php code is installed in my function.php of my child theme.
    It serves me to have 2 columns for the description of my recipes. I use it from the beginning and I would love to use it in your theme, but it has not worked yet. I put this code in the function.php of the theme “generalpress”.
    here it is :

    //DEUX COLONNES
    function bootstrapRow($attributes, $content) {
    	extract(shortcode_atts(array(
    	"classes" => null,
    	"element" => "div"
    	), $attributes));
    	$result = "<$element class=\"row";
    	if ($classes) $result .= " $classes";
    	$result .= "\">" . do_shortcode($content) . "</$element>";
    	return $result;
    }
    add_shortcode("row", "bootstrapRow");
    function bootstrapColumn($attributes, $content) {
    	extract(shortcode_atts(array(
    	"all" => null,
    	"xs" => null,
    	"sm" => null,
    	"md" => null,
    	"lg" => null,
    	"offsetall" => null,
    	"offsetxs" => null,
    	"offsetsm" => null,
    	"offsetmd" => null,
    	"offsetlg" => null,
    	"classes" => null,
    	"element" => "div"
    	), $attributes));
    	$result = "<$element class=\"";
    	if ($all) {
    		$result .= "col-xs-$all col-sm-$all col-md-$all col-lg-$all";
    	} else {
    		if ($xs) $result .= " col-xs-$xs";
    		if ($sm) $result .= " col-sm-$sm";
    		if ($md) $result .= " col-md-$md";
    		if ($lg) $result .= " col-lg-$lg";
    	}
    	if ($offsetall) {
    		$result .= " col-xs-offset-$offsetall col-sm-offset-$offsetall col-md-offset-$offsetall col-lg-offset-$offsetall";
    	} else {
    		if ($offsetxs) $result .= " col-xs-offset-$offsetxs";
    		if ($offsetsm) $result .= " col-sm-offset-$offsetsm";
    		if ($offsetmd) $result .= " col-md-offset-$offsetmd";
    		if ($offsetlg) $result .= " col-lg-offset-$offsetlg";
    	}
    	if ($classes) $result .= " $classes";
    	$result .= "\">" . do_shortcode($content) . "</$element>";
    	return $result;
    }
    add_shortcode("col", "bootstrapColumn");
    function bootstrapClearfix($attributes, $content) {
    	extract(shortcode_atts(array(
    	"xs" => null,
    	"sm" => null,
    	"md" => null,
    	"lg" => null,
    	"classes" => null,
    	"element" => "div"
    	), $attributes));
    	$result = "<$element class=\"clearfix";
    	if ($xs) $result .= " visible-xs";
    	if ($sm) $result .= " visible-sm";
    	if ($md) $result .= " visible-md";
    	if ($lg) $result .= " visible-lg";
    	if ($classes) $result .= " $classes";
    	$result .= "\">" . do_shortcode($content) . "</$element>";
    	return $result;
    }
    add_shortcode("clearfix", "bootstrapClearfix");

    I’m currently testing your theme on this test site at this address where you can see the worry.
    Do you have an idea of the couic, an idea for me to move forward.
    Thanks in advance
    cordially

    #373469
    Leo
    Staff
    Customer Support

    Hi there,

    I think that’s more complicated than it needs to be for creating columns.

    Try one of the methods here: https://docs.generatepress.com/article/creating-columns/

    #373669
    jean

    OK. Je vais essayer avec :

    <div class="grid-container">
        <div class="grid-50">
            Left side content
        </div>
        <div class="grid-50">
            Right side content
        </div>
    </div>

    Est-ce compatible avec les mobiles ?
    merci

    #373671
    Leo
    Staff
    Customer Support

    It would stack on mobile. You can set something for mobile specific though.

    See the examples for explanation: https://docs.generatepress.com/article/creating-columns/

    #373691
    jean

    Bon, je viens d’essayer mon code et cela fonctionne bien. Les colonnes s’affichent l’une en dessous de l’autre sur les portables.
    merci

    #373694
    Lyle

    Jean,

    Another way would be to use just CSS.
    Wrap your content in a div, and in this example, I gave it a class name of two-col, then this CSS:

    @media (min-width: 768px) {
    .two-col {
        -webkit-column-count: 2; /* Chrome, Safari, Opera */
        -moz-column-count: 2; /* Firefox */
        column-count: 2;
    	}
    }

    Cheers!
    Lyle

    #373696
    jean

    Merci Lyle, je vais essayer votre solution
    cordialement

    #373794
    Leo
    Staff
    Customer Support

    Glad I could help!

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.