1

I have a Matrix field which has one block type (1 asset field - I'm using a Matrix field as I'll be adding text fields later on to the same block). On the front end I am using Bootstrap's grid system to output the images in columns.

{% for block in entry.blockName %}
    <div class="col-md-3">
    {% set image = block.image.first() %}
    {% if image %}
        <img src="{{ image.getUrl }}">
    {% endif %}
    </div>
 {% endblock %}

For some reason when I test it the last column on the first row gets shunted down as shown in the image.

enter image description here

This only happens on the first row of items and if I test it out of the matrix field with placeholder images and static HTML it works fine. The CSS isn't changed for the last item so I can't seem to see what's causing this.

Anyone have any ideas?

2 Answers 2

1

This issue won't be related to the Matrix field or the twig tags outputting it - check the CSS thats being applied. Are you wrapping your columns in a div with a class of .row?

UPDATE: test by creating a new template and set it up with the following (replace the first line with the entry you're using:

{% set entry = craft.entries.section( 'homepage' ).first() %}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" media="screen">

<div class="container">
    <div class="grid">
        {% for block in entry.blockName %}
          <div class="col-md-3">
            {% set image = block.image.first() %}
            {% if image %}
              <img src="{{ image.getUrl }}">
            {% endif %}
          </div>
        </div>
        {% endfor %}
    </div>
</div>
3
  • Yep, they're wrapped. I have to agree that I couldn't see any reason for the Matrix to cause this but it is odd that when I remove it from the twig tags and copy them in manually they work. Meaning the CSS and HTML markup that's being outputted is the same in both ways but when it's via the tags I get the spacing.
    – JRW
    May 19, 2016 at 13:14
  • See suggestion to test in the edit to my answer - if you don't see the same behaviour then you know it's something else on your page or CSS that's affecting it. May 19, 2016 at 13:32
  • Thanks for your help, I've gave it a go and it was the same result. I'm going to try and replicate it in a different scenario and see if I can find the cause
    – JRW
    May 19, 2016 at 13:44
0

White space issue? Seen something similar happening with lists.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.