Dear All,
The portfolio website I’m working on has a project page with a image gallery that is a CSS Grid with two columns. The images can either span the two columns, or only occupy one column.
On mobile, the Grid only has one column.
The project page has two files sections with two different templates, one is project-cover and the other is project-image. In this way I can filter out the cover from the project’s gallery.
On desktop all works well, but on mobile the first image that doesn’t have the class to span 2 columns disappears, or better it gets the dimension of 0x0 pixels.
In the backend I can see that the first image in the project-gallery has the position of 2, and the cover gets the first spot. Maybe I’m completely wrong, but can the issue be somewhere there…?
I included below some screenshot and my code.
Many thanks for any help!
Desktop view, in the circle the image that will disappear
Mobile view, image is not shown
In the devTools I can see the figure is there, but the dimension is 0x0px
Project Gallery Snippet:
<section class="project__gallery">
<?php foreach ($images as $file): ?>
<figure class="project__item <?= $file->class() ?>">
<?= snippet($file->type(), ['file' => $file]) ?>
<figcaption>
<?php if ($file->caption()->isNotEmpty()): ?>
<span class="project__itemCaption"><?= $file->caption() ?></span>
<?php endif ?>
<?php if ($file->photographer()->isNotEmpty()): ?>
<span class="project_itemCredits">(© <?= $file->photographer() ?>)</span>
<?php endif ?>
</figcaption>
</figure>
<?php endforeach ?>
</section>
Project Blueprint - Cover Section:
sections:
cover:
translate: false
label: Cover Image
type: files
layout: cards
size: medium
min: 1
max: 1
template: project-cover
info: "{{ file.dimensions }}"
Project Blueprint - Gallery Section:
sections:
images:
type: files
info: "{{ file.dimensions }}"
layout: cardlets
template: project-image
ratio: 1/1
min: 1