Show 3 logos in 1 row - Mobile

Store Design

Topic summary

A user seeks to display 3 logos per row on mobile instead of a long vertical list that consumes excessive space on their awards page.

Solutions Provided:

Three different CSS-based approaches were offered:

  • LizHoang: Suggested adding CSS to theme.min.css targeting desktop view (min-width: 1024px) with 30% width cards, though this doesn’t address the mobile requirement

  • DaisyVo: Provided code for theme.liquid using CSS Grid with grid-template-columns: 1fr 1fr 1fr specifically for mobile (max-width: 768px), targeting the awards page URL

  • Huptech-Web: Offered similar CSS Grid solution in theme.liquid for mobile (max-width: 749px) with repeat(3, 1fr) columns and auto width

Status: Multiple solutions presented but no confirmation from the original poster on which approach was implemented or successful. The discussion remains open without a marked resolution.

Summarized with AI on October 31. AI used: claude-sonnet-4-5-20250929.
1

Hi there,

For the section below is it possible to show 3 logos on 1 row on mobile? The long list is taking up too much space now :slightly_smiling_face:

Screenshot 2025-03-05 at 10.55.42.png
Screenshot 2025-03-05 at 10.55.42.png2564×934 145 KB

website

passw: wine

Thanks so much!

2

Hi @INFRA

You can try to follow this step
Step 1: Go to Edit code
Step 2: Find file theme.min.css and add this code at the end of t

@media (min-width: 1024px) {
    .cloud-card-template--24345933971731__ss_logo_cloud_2_wCDJre {
        width: 30% !important; 
    }
}

Result

LizHoang_0-1741139843178.png
LizHoang_0-1741139843178.png1231×733 139 KB

Best,

Liz

he file

3

Hi @INFRA

To complete your requests, please follow these steps:

  1. Go to Shopify Admin > Online Store > Theme >Edit code > Theme.liquid
  2. Paste the code provided before 
{% style %}
{% if canonical_url == "https://waiheke-wine-growers-association.myshopify.com/pages/awards" %}
@media screen and (max-width: 768px){
.wrapper.main-content.page-main--wrapper > div:nth-child(3) > div > div > div > div {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr !important;
}
.wrapper.main-content.page-main--wrapper > div:nth-child(3) > div > div > div > div > a {
    width: auto !important;
}
}
{% endif %}
{% endstyle %}

Here is the result:

image_480.png
image_480.png245×480 42.9 KB

I hope this helps

Best,

Daisy

4

Good day @INFRA ,

To achieve this, simply follow these steps:

  1. Open your theme editor in Shopify, then click on Edit code.
  2. Find and open the theme.liquid file.
  3. Inside the theme.liquid file, place the following code (CSS) within the tag.
@media screen and (max-width: 749px){
    .cloud-cards-template--24321244496147__ss_logo_cloud_2_wCDJre {
        gap: 8px;
        display: grid;
        grid-template-columns: repeat(3 , 1fr);
    }
    .cloud-card-template--24321244496147__ss_logo_cloud_2_wCDJre {
        width: auto;
    }
}​

If this was helpful and you have any further questions, please don’t hesitate to ask. If you found my solution useful, feel free to accept and like it.
(S.P)