Mobile Version of Icon With Text

Store Design
,

Topic summary

Issue: On the Influence theme, the “Icons With Text” sections display only the first block on mobile. Tapping/swiping doesn’t advance, and the user wants either auto-rotation or all three blocks stacked on mobile; desktop displays correctly.

Proposed fix: A contributor suggests a mobile-only CSS change to stack items vertically by resetting grid positioning:

  • Add to Assets > main.css/base.css/style.css/theme.css: a @media (max-width: 768px) rule that unsets grid-row-start and grid-column-start for the list items.
  • Intended effect: on mobile, all icon-with-text items appear one after another (stacked) instead of only the first item showing.

Notes:

  • This change will affect all Icon With Text sections sitewide.
  • The suggestion addresses stacking, not the requested auto-scrolling/auto-rotation.
  • Screenshots were provided showing the mobile issue and the stacked result.

Status: A solution was proposed (CSS for stacking). No confirmation from the original poster; auto-scroll remains unanswered, so the discussion appears open.

Summarized with AI on December 24. AI used: gpt-5.
1

For an information page I am working on for our site, our Icons With Text section looks fine on desktop, but only the first block shows up on mobile. Both Icons With Text sections do this. I want these sections to automatically scroll to the next block (mighty microbes will change to local compost after a while with no user input) or I would want all 3 blocks for each section to stack on top of one another on mobile.

Any advice and/or custom code would be greatly appreciated.

Link: https://www.exploresherpa.com/pages/our-process

I am using an Influence Theme

Screenshot 2024-07-15 115826.png
Screenshot 2024-07-15 115826.png2818Ă—1168 383 KB

Tapping and swiping does not move it to the next block
Tapping and swiping does not move it to the next block828Ă—1792 198 KB

1 Like
2

Hi @Explore-Sherpa

Check this one.

  1. From you Admin page, go to Online Store > Themes
  2. Select the theme you want to edit
  3. Under the Asset folder, open the main.css(base.css, style.css or theme.css)
  4. Then place the code below at the very bottom of the file.
@media only screen and (max-width: 768px){
li.flex.items-center.justify-center.row-start-1.col-start-1 {
    grid-row-start: unset !important;
    grid-column-start: unset !important;
}
}

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

1 Like