CSS gets changed by <?= ?>

Kirby 3 Solved ✅
1

Hey!

Margins and heights of my divs are changing when i put in kirby elements such as <?= $projekt->titel()->kt() ?>
How can i prevent kirby from touching any of my css?

Thanks :slight_smile:

2

Welcome to the forum! :~)

Kirby itself doesn’t add any CSS to your files. Are you using a theme?

I assume what you percieve as CSS changes are default margins around the paragraph tags that kirbytext() (or kt()) adds around the field content. You can use the kirbytextinline() method instead to prevent that from happening.

4

Thanks Bruno! That helped a lot!
I have another problem related to that. My css grid isn’t working as expected once im filling it with images from kirby which is working fine…
What could be the problem?

5

It’s kind of hard to tell without seeing your code, or knowing what you expect it to do and what it does instead.

If it’s a layout issue, I would suggest that you consult your dev tools inspector (right click on the element you want to inspect and select “inspect element” in most browsers) and check out what default styles might be applied to elements that you might want to overwrite.

6

Of course… sorry.

<?php foreach($projekt->children()->images() as $image): ?>
                <div class="images bruder-images">
                  <img class="image" src="<?= $image->url() ?>">
                </div>
              <?php endforeach ?>

.images {
  grid-gap: 3vw;
  width: 99%;
  z-index: 30;
  display: grid;
  grid-template-columns: auto auto auto auto auto auto;
  padding-bottom: 3vw;
}
7

I don’t see a reason why that shouldn’t work as expected (still not really knowing your expectation).

I’m not super knowledgeable on css grid, but i think this could be

grid-template-columns: repeat(6, 1fr)

Edit: @texnixe is absolutely right. I was too tired yesterday, didn’t notice

8

Your markup is wrong for what you want to achieve, it should be like this:

<div class="images bruder-images">
  <?php foreach($page->images() as $image): ?>
    <img class="image" src="<?= $image->url() ?>">
  <?php endforeach ?>
 </div>

With your original code, you create a grid container for each individual image.

9

This really helped! Thanks for your work!