Image Not Showing on Mobile

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]) ?>
                    <?php if ($file->caption()->isNotEmpty()): ?>
                        <span class="project__itemCaption"><?= $file->caption() ?></span>
                    <?php endif ?>
                    <?php if ($file->photographer()->isNotEmpty()): ?>
                        <span class="project_itemCredits">(&#169; <?= $file->photographer() ?>)</span>
                    <?php endif ?>
        <?php endforeach ?>

Project Blueprint - Cover Section:

    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:

    type: files
    info: "{{ file.dimensions }}"
    layout: cardlets
    template: project-image
    ratio: 1/1
    min: 1

I think the problem is in your stylesheet, not in the code posted above.

Is the preview live somewhere? CSS bugs are tricky to debug without a live example.

Many thanks for your replies!

I tried to debug the CSS as well, but could not make it work…
Should I post the code?

Otherwise yes, here is a preview to the website: 180e88 - CoDe. Zürich

If you assign grid-column: span 2; to all items in mobile viewport, or remove grid-column: span 2 from the span-2 items, all will be well.

Oh yes, Indeed it works!
Could you explain what was causing the problem?

Many thanks!

Your problem was a conflict in the way the grid is laid down.
On mobile, your main grid was set up to use 1 column grid-template-columns: 1fr;

That means you’re telling the browser to make one single column using all the available space.
But then you have a few items within that grid that are spanning two columns.

As a result of that, the first of the two columns, since it’s designed to use the available space is collapsed down to 0. Because there is no available space since it’s used by the second column.

You can clearly see it if you turn on column numbers.
Screenshot 2021-10-26 at 3.08.46 PM

See how the second column is starting at the beginning of the container? You don’t even see the space from 1 to 2. You only see the column from 2 to 3
That’s because the first column as a result of your configuration has no space to go.

So the solution is to either remove the span 2 as @moonwalk suggested.
Or you can add span 2 to all items but at that point you also want to change that initial grid-template-columns: 1fr; because you’re actually using two columns.

Or you can use grid-column: 1 / -1 rather than span 2

So the TLDR is that you had a mismatch between the way the grid was laid down and the width of the content within that grid.


many thanks for your explanation @manuelmoreale !

i see the problem now, probably your suggestion grid-column: 1 / -1 is the cleaner way to fix it.

1 Like