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?

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>
| improve this answer | |
  • 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 '16 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. – Luke Pearce May 19 '16 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 '16 at 13:44
0

White space issue? Seen something similar happening with lists.

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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