How can I display two collections side by side on mobile?

Store Design

Topic summary

Goal: show two collections side by side on mobile for a Shopify store, specifically “Customer Favorites” and “Black n White.”

Proposed solution:

  • Reorder sections so “Black & White Stickers” and “Custom Favorites” are adjacent (move “Color Stickers” out of the middle).
  • Wrap those two sections in a container div with class “custom-fiddystickers.”
  • Add CSS: .custom-fiddystickers { display: flex; margin-bottom: 16px; } to align them next to each other.

Explanation: Using CSS Flexbox (display: flex) on the parent container lays out its child elements in a row, enabling side-by-side presentation on mobile.

Assets: Multiple images illustrate the current order, the wrapping structure, and the desired side-by-side result; these visuals are central to understanding the change. A brief code snippet (HTML/CSS) is provided.

Outcome: Concrete steps were given to achieve the layout without an app. The original poster has not confirmed implementation yet, so the thread appears open pending feedback.

Summarized with AI on January 14. AI used: gpt-5.
4

Hi @fiddystickers ,

Image:

![view - 2023-11-03T085638.475.png|887x818](upload://djaNbHpJX5IBxkMysMoV8LZvSVk.png)

Currently color stickers are located between black & white stickers and custom favorites

You can move COLOR STICKER to another place so that BLACK & WHITE STICKER and CUSTOM FAVORITE are next to each other.

view - 2023-11-03T090737.913.png
view - 2023-11-03T090737.913.png839×817 707 KB

You add a div tag with class custom-fiddystickers wrapped in black & white sticker and custom favorites. Then insert the css code as follows:

.custom-fiddystickers {
    display: flex;
    margin-bottom: 16px;
}

This is the desired result:

view - 2023-11-03T091027.665.png
view - 2023-11-03T091027.665.png1919×965 454 KB

Hope it helps @fiddystickers !