How can I change mobile mosaic display to match desktop style?

Store Design
,

Topic summary

Goal: Make the homepage mosaic grid on mobile replicate the desktop layout, even with smaller images.

Key attempts (mobile @media max-width: 999px):

  • Forced flexbox on .mosaic, .mosaic__column, and .mosaic__item; set columns to flex-direction: column and equal flex growth.
  • Adjusted padding and min-height (incl. vw units) for .mosaic__item > :first-child and targeted items via :first-child and :nth-child(2) selectors, including a specific Shopify section ID.

Current issue:

  • The middle mosaic image renders too thin on mobile. Increasing min-height to show it fully causes other images to be cropped, suggesting conflicting aspect ratios and scaling under the enforced flex sizing/padding.

Requested guidance:

  • Whether the problem is due to scaling vs. padding and how to avoid cutting off other images while keeping proportions.

Proposed workaround:

  • Use a different asset on mobile for the problematic item via CSS background-image on the targeted selector.

Context:

  • Live site link provided; multiple screenshots are central to understanding the desired vs. current layout.

Status:

  • Partially improved; no confirmed final solution yet. Discussion remains open pending a robust mobile styling or image substitution approach.
Summarized with AI on January 21. AI used: gpt-5.
1

Hello everyone,

I would like to find out how to display a mosaic grid and all images within the mosaic for mobile, in the same style as desktop.

Please see this image as reference.

Mobile Width Mosaic.png
Mobile Width Mosaic.png2000×2000 262 KB

I have tried changing the code of each of the columns of the mosaic, from the min-width to the display, but with no luck unfortunately.

Here is the code that I have added currently:

@media screen and (max-width: 999px) {
/* On mobile we increase the height of some elements (so that elements that appear bigger on desktop also appear bigger on mobile */
.mosaic–two-columns .mosaic__column:first-child .mosaic__item > :first-child,
.mosaic–three-columns .mosaic__column:nth-child(2) .mosaic__item > :first-child {
min-height: 100px;
}
}

@media screen and (max-width: 999px) {
#shopify-section-template–18615043653913__d0f07475-f9c9-46c7-a207-f2836ade9b52 .mosaic__column:first-child {
display: flex !important;
}
}

@media screen and (max-width: 999px) {
#shopify-section-template–18615043653913__d0f07475-f9c9-46c7-a207-f2836ade9b52 .mosaic__column:nth-child(2) {
display: flex !important;
}
}

@media screen and (max-width: 999px) {
#shopify-section-template–18615043653913__d0f07475-f9c9-46c7-a207-f2836ade9b52 .mosaic__column:nth-child(3) {
display: flex !important;
}
}

I would like it to display just like it does on desktop if possible, even if the images display smaller.

Appreciate any input on this topic!

2

Hello Emirates7,

Please see the website link here: https://toptoys2u.co.uk/

3

Hello Emirates,

This is nearly similar to what is displayed on the image , however the middle image is quite thin and does not display the full size correctly.

Would you know what the code is to adjust the middle mosaic item, which I believe is “first-child”?

Please see what it looks like currently, compared to what I would like to to look like.

Current:

Screenshot 2023-08-16 152329.png
Screenshot 2023-08-16 152329.png400×294 90.4 KB

Desired design:

Mobile Width Mosaic.png
Mobile Width Mosaic.png2000×2000 262 KB

Thank you for your help!

4

Hello Emirates7,

Thank you for your help and adjustment on the code.

This nearly looks identical to the desired design, and I have tried to adjust some of the padding and the min-height on the first-child in order to display the full image, however, when doing this, unfortunately the other images get cut off.

Please see the code that I have revised below.

@media (max-width: 999px) {
.mosaic {
display: flex !important;
}
.mosaic__column {
display: flex !important;
flex-direction: column !important;
flex: 1 0 0% !important;
}
.mosaic__item {
display: flex !important;
flex: 1 0 auto !important;
flex-direction: column !important;
padding: 0px 3px 8px 3px !important;
}
.mosaic__item > :first-child {
min-height: 15vw !important;
}
.mosaic–two-columns .mosaic__column:first-child .mosaic__item > :first-child, .mosaic–three-columns .mosaic__column:nth-child(2) .mosaic__item > :first-child {
flex: 1 0 auto !important;
height: 100% !important;
min-height: 20px !important;
}
}

Is this to do with the scaling or the padding, and would there be a workaround for this?

I highly appreciate the help.

5

Hello Emirates7,

I thought that would be the case unfortunately.

Would a code to display a different image compared to desktop work?

Such as:
.mosaic–two-columns .mosaic__column:first-child .mosaic__item > :first-child, .mosaic–three-columns .mosaic__column:nth-child(2) .mosaic__item > :first-child {
flex: 1 0 auto !important;
height: 100% !important;
min-height: 20px !important;
background-image: url(“https://cdn.shopify.com/s/files/1/1779/2423/files/TEST_f3ce2ff1-2ebd-469d-af2c-d16d8c5811bb.png?v=1690378770”);
}
}

Thank you very much for your help on this matter