- This topic has 7 replies, 3 voices, and was last updated 6 years, 3 months ago by
Leo.
-
AuthorPosts
-
August 25, 2017 at 9:45 am #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
cordiallyAugust 25, 2017 at 11:34 am #373469Leo
StaffCustomer SupportHi 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/
August 25, 2017 at 11:09 pm #373669jean
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 ?
merciAugust 25, 2017 at 11:47 pm #373671Leo
StaffCustomer SupportIt would stack on mobile. You can set something for mobile specific though.
See the examples for explanation: https://docs.generatepress.com/article/creating-columns/
August 26, 2017 at 12:42 am #373691jean
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.
merciAugust 26, 2017 at 12:49 am #373694Lyle
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!
LyleAugust 26, 2017 at 12:51 am #373696jean
Merci Lyle, je vais essayer votre solution
cordialementAugust 26, 2017 at 8:17 am #373794Leo
StaffCustomer SupportGlad I could help!
-
AuthorPosts
- You must be logged in to reply to this topic.