Help with Bloglist (CSS and so)

Kirby 2 Solved ✅
1

Hey together,

for all of you a happy new year.

Today I have a screenshot for you with an first example of a bloglist.

My problem is following:

The title of the article with number 01 is not exactly under the other titles. I think I have to use a little bit css to correct that but I don’t really know how.

And then I want to know - in general - what do you think about the idea to make a simple list with a icon for the post type, the number of article and the title. The only thing which is clickable is the title.

2

Hi :slight_smile:
Can you maybe please provide us with a (temporary) link to the page so that we can let you know what should be changed? There’s so many options and a screenshot doesn’t provide enough information to solve it.

Chantal

3

Hi,

actually I can’t provide you with a link because my website is on a local development stage.

This is the current code structure of my bloglist. (It’s not very good but for a first design idea it’s ok.)

<main class="main" role="main">

      <section class="container-alt bloglist">

        <h1><?= $page->title()->html() ?> <span><?= $page->subtitle()->html() ?></span></h1>

            <?php foreach($page->children()->visible()->flip() as $article): ?>

              <article class="post-line">

                <?php if($article->template() == 'article.book'): ?>

                  <h3>
                    <i class="icon-basic-book"></i> <span class="number"><?php echo $article->num() ?></span><a class="article-book-link" href="<?= $article->url() ?>"><?= $article->title()->html() ?></a></h3>

                <?php elseif($article->template() == 'article.video'): ?>

                  <h3><i class="icon-basic-video"></i> <span class="number"><?php echo $article->num() ?></span><a class="article-video-link" href="<?= $article->url() ?>"><?= $article->title()->html() ?></a></h3>

                <?php elseif($article->template() == 'article.gallery'): ?>

                  <h3><i class="icon-basic-picture-multiple"></i> <span class="number"><?php echo $article->num() ?></span><a class="article-gallery-link" href="<?= $article->url() ?>"><?= $article->title()->html() ?></a></h3>

                <?php elseif($article->template() == 'article.link'): ?>

                  <h3><i class="icon-basic-link"></i> <span class="number"><?php echo $article->num() ?></span><a class="article-link-link" href="<?= $article->url() ?>"><?= $article->title()->html() ?></a></h3>

                <?php elseif($article->template() == 'article.text'): ?>

                  <h3><i class="icon-basic-sheet-pencil"></i> <span class="number"><?php echo $article->num() ?></span><a class="article-text-link" href="<?= $article->url() ?>"><?= $article->title()->html() ?></a></h3>

                <?php endif ?>

              </article>

            <?php endforeach ?>

      </section>

  </main>
4

Hi md1986,

based on this I can only suggest the following:

  • Did you try removing the enter from the book h3 code?
  • And did you check if there is no space in the article title?.

Sorry but that’s all I can do based on this.

Can you maybe post the css file content and the html output?
Are you using javascript to alter url’s?

5

I think the problem is that “01” is not as wide as “02” and other numbers which produces the small offset. You can try to give the span with the class “number” a fixed width, like 20px.

1 Like
6

Note that you can only apply a width if you make the span a block element, or rather display: inline-block in this case. And don’t use a pixel width, but ®em units to make it accessible.

2 Likes
7

Thanks for your help.

I have use display:inline-block and a em-based width for the span element.

Now it is how I want it.

1 Like