Kirby Columns don't work right? Or Me?

Kirby 2 Solved ✅
1

Hey Community,

first i want to say thank you to the Kirby Team for all your love in Kirby :smile: .
But now i have a question about the coloumns plugin.
I use this plugin on many sites and it work very fine. I use the latest nightly build.
I would like to create a new template for a site. I like to have a 2 coloumns grid here. On the first coloumn i want to intigrate the fancybox plugin. On the second coloumn i add some text.

For this template i didn’t want to use the kirbytext and want to add the text and the fancybox plugin directly into the template. My question now is can i use the coloumn plugin here right? because when i do this and add the following sample text to it like this:

<?php snippet('header') ?>
<main class="main" role="main">
  <div class="text">
    <h1><?php echo $page->title()->html() ?></h1>
    <?php echo $page->text()->kirbytext() ?>      
    <div class="columns columns-2">
      <div class="column">
       <h3>A</h3>				
     </div>
     <div class="column">
      <h3>B</h3>				
    </div>
  </div>
</div>
</main>
<?php snippet('footer') ?>

then it does not appear side by side but each other.
Is this normal because i didn’t used the Plugin in Kirbytext? Maybe someone can help me? Thanks :wink:
Greetings
florian

2

Have you iincluded the css for the columns to work?

3

good morning.

May be it would help if you posted your css for the column classes :wink:

If I understood correctly, you want to create a single “box” with two parts in it.
left part: picture
right part: text

correct?

I believe it’s pretty much the same I wanted to do on my site.
I came up with this:

<ul class="none cf">
    <li>
      <h3>Title</h3>
           <img src="">
	<p>Text</p>
  </li>
</ul>

CSS is:

li img {
	float: left;
margin: 0 15px 0 0;
}
ul li {
    list-style-type: none;
    overflow: hidden;
    padding-bottom: 25px;
}

This basically creates a list of items (blogposts) in the loop.
The image is set to floating to the left so it will reside there and the text will adapt to image position.

you may want to play with the margins, though. :wink:

perhaps this helps you out with your request?

note that this will only work for the img tag within a li tag

see more here: http://www.deleker.com/
I’m in a meeting. :wink:

4

Thanks andi242 for your reply :wink:

here is my css code:

/* Columns
-------------------------------------------------- */
.columns {
  margin-right: -2rem;
}
.column {
  display: inline-block;
  vertical-align: top;
  padding-right: 2rem;
}
.columns-1 .column {
  width: 100%;
}
.columns-2 .column {
  width: 50%;
}
.columns-3 .column {
  width: 33.33%;
}
.columns-4 .column {
  width: 25%;
}
.columns-5 .column {
  width: 20%;
}

I will check your solution today :smile:
Greetings
florian

5

Set white-space:nowrap on the columns-container.

1 Like
6

Thank u, now its working :smile: :smile:
Greetings
Florian