Horizon Theme – Make icons with text horizontally scrollable on mobile devices (CSS solution, but first tiles are cut off)

Online Store and Theme Development
1

Hey there,

I have added icons with text to my page that should be displayed side by side in the mobile version. The Horizon theme only displays these elements vertically by default and does not offer an option to display a horizontal scroll bar.

That’s why I solved it using CSS. My code and screenshot is below.

The problem: In the mobile view, only the first three tiles are visible; the rest are cut off. I cannot extend the padding further to the left, as this would cause the layout to no longer work or exceed the 500-character limit.

Does anyone have an idea for a quick solution?

Thanks!

@media (max-width: 749px) {
.layout-panel-flex.mobile-column {
flex-direction: row !important;
overflow-x: auto;
gap: 1rem;
padding: 1rem 0;
margin-left: -1rem;
padding-left: 1rem;
}
.layout-panel-flex.mobile-column > .group-block {
flex: 0 0 auto;
min-width: 140px;
max-width: 280px;
text-align: center;
}
.group-block-content.layout-panel-flex–column.mobile-column {
flex-direction: column !important;
align-items: center;
}
.layout-panel-flex.mobile-column::-webkit-scrollbar {
display: none;
}
}

image
image1917×865 260 KB

2

Hey @Alexandra_Steegmann :waving_hand: Could you try something like the below?


@media (max-width: 749px) {
.layout-panel-flex.mobile-column {
display: flex;
flex-direction: row !important;
flex-wrap: nowrap !important;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
gap: 1rem;
padding: 0 1rem;
margin: 0 -1rem;
}
.layout-panel-flex.mobile-column > .group-block {
flex: 0 0 auto;
min-width: 140px;
max-width: 280px;
text-align: center;
}
.layout-panel-flex.mobile-column::-webkit-scrollbar { display: none; }
}

The key change here is adding nowrap on the flex container so items don’t wrap to a potential hidden second line. There’s also some momentum scrolling included for iOS so that we can reduce clipping by parent containers.

Can you try replacing your mobile CSS with the snippet above there and let me know if this resolves things in the preview/on a real device?

If you’re still seeing items cut off, no worries, just let me know here in this thread and we can keep digging into this. Hope this helps! :slight_smile:

3

Hello @Alan_G,

thank you for helping me.

I inserted your code. Unfortunately, individual boxes appeared next to each other again, which you can then scroll through in each box.

The symbol is also loaded next to the text again instead of above it.

I also tried it with a real mobile device.

However, all symbols should be in a box that extends across the width of the screen, and the six symbols should be horizontally scrollable within it.

I attached a picture of the result when i put in your code.

Do you have any other ideas?

Have a nice day!

image
image1804×1165 70.6 KB

4

Hey @Alexandra_Steegmann , thanks for trying that, happy to help further on this.

Would you be comfortable sharing a preview link for the theme (Online Store > Themes > Preview > Share preview link) and the section name you’re using? That’ll let me inspect the DOM/CSS without needing any access. If you’d prefer not to post your URL publicly, I can DM you to grab the preview link and we can keep any sensitive details private (just let me know!). I won’t ask for credentials or access—just the preview URL and the exact section/element you’re modifying. I’ll circle back here with the fix/advice so others can benefit too. Ping me here if you’d like to set up a DM and I can get on that right away :slight_smile:

1 Like
5

Hey @Alan_G

Thanks so much for offering to help – I really appreciate it! :blush:
I’d prefer to send you the preview link privately, just because I’m not sure if I’m actually allowed to share it publicly.

I’m definitely happy to post the solution here afterwards though – I can’t imagine I’m the only one running into this issue.

Looking forward to your reply!

6

Hi @Alexandra_Steegmann, no worries at all, happy to help! I’ll set up that DM on my end here and take a look once I hear back from you. We can loop back into the public thread once we have an answer to share with everyone, appreciate you working with me on this :slight_smile:

1 Like