Mobile Version of Icon With Text

[Explore-Sherpa]

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

[Made4uo-Ribe]

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;
}
}

• And Save.

• Result:

• 

  Note: This code will change also on other icon with text section.

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