Logo List

Store Feedback

Topic summary

A user is experiencing layout issues with their logo list section, which displays incorrectly on desktop (logos overlapping and stacked on top of each other) but works fine on mobile. They’re new to Shopify and unsure where to locate CSS files or implement fixes.

Key Details:

  • Problem is desktop-specific, mobile version displays correctly
  • User has hidden the section publicly while troubleshooting
  • They’re working with a new theme and have limited CSS experience
  • Cannot locate styles.css.liquid file

Proposed Solutions:

  • Use browser Developer Tools to inspect CSS conflicts
  • Apply flexbox/grid CSS fixes to the logo container for proper spacing and alignment
  • Check theme customization settings for logo list configuration options
  • Add media queries to handle desktop-specific layout requirements
  • Clear browser cache after implementing changes

Status: Issue remains unresolved; awaiting user implementation of suggested CSS fixes or further troubleshooting.

Summarized with AI on November 2. AI used: claude-sonnet-4-5-20250929.
1

why is my logo list messed up only on shopify desktop its like the pictures are everywhere and messed up. The links are on the picture when you click it but its all on top of each other. On mobile it is fine if you need my store link I will share

2

Move it sport - Explore any sport related products

moveitsport.com
https://moveitsport.com

Also I don’t know where to place the code exactly I can’t find styles.css.liquid

I am really new to this so I have no idea about this stuff. I don’t know how to check if their is a css conflict the problem is only on desktop also how would I show you the problem because I don’t want to have this problem shown publicly on my store so I have it hidden right now. I also have made css changes but the only thing was a text color for another section. Also this is a new theme I got. Thanks

3

Hi @Ahmed16

It sounds like the issue with your logo list on the Shopify desktop view could be due to CSS styling, layout conflicts, or how your theme handles responsive design. Here’s a breakdown of how you can fix it:

1. Inspect the Problem- Use your browser’s Developer Tools (right-click on the messed-up area and select “Inspect”) to check the CSS applied to the logo section. This will help you identify if margins, padding, or grid settings are causing the overlap.

2. Common Fixes for Layout Issues- Grid or Flexbox Setup: Most themes use CSS grid or flexbox for layout. If logos are stacking incorrectly, it could be a misconfigured grid or flex settings. Add this to your theme.scss.liquid or custom.css file to fix it:

.logo-list-container {

display: flex; /* or display: grid; */

flex-wrap: wrap; /* Ensures items wrap on small screens */

justify-content: space-around; /* Adjust alignment */

gap: 10px; /* Add space between logos */

}

.logo-list-container img {

max-width: 100%; /* Ensures logos are responsive */

height: auto; /* Maintain aspect ratio */

margin: 0 auto; /* Center logos */

}

3. Check for Theme-Specific Settings- Go to Online Store > Themes > Customize and check if your theme has specific settings for the logo list, such as columns, spacing, or alignment. Adjust these as needed.

4. Update the Section Code (if needed)- If custom CSS doesn’t solve the issue, you might need to tweak the Liquid code in your theme files. Navigate to: Online Store > Themes > Actions > Edit Code > Sections/logo-list.liquid (or similar).

Here’s an example of a clean logo list section using Liquid and Flexbox:

{% for logo in section.settings.logos %}

{{ logo.alt }}

{% endfor %}

5. Preview Changes on Desktop- After making changes, clear your browser cache and preview the desktop version of your store to ensure the layout looks good.

6. If You’re Using an App- If a third-party app powers the logo list, go to the app settings and adjust the alignment or row settings there.

Bonus Tip: Mobile vs. Desktop- If the layout looks fine on mobile but breaks on desktop, the issue might be related to media queries in your CSS. Here’s an example:

@media (min-width: 768px) {

.logo-list-container {

display: grid;

grid-template-columns: repeat(4, 1fr); /* Adjust based on the number of logos */

gap: 20px;

}

}

Example Visual Layout

If you’d like, I can generate a visual mock-up or code example for better clarity. Let me know!

If you need any other assistance, feel free to reply and I will try my best to help.
Best regards,
Daisy