How can I optimize my store for mobile viewing?

Store Design
1

Hi all,

My store looks ok on desktop but it is not optimized for mobile phone.

For instance, the products in my featured collection are listed horizontally instead of vertically were viewers can scroll down.

How can I make my product listing scrollable and mobile friendly?

Thanks!

2

please share a store url to better assist

3

Hi, @fangsb ,
This is Evita from On The Map.

  1. Go to Online Store->Theme->Edit code
  2. Asset->theme.scss->paste bellow code in bottom of file
@media only screen and (max-width: 589px) {
  .grid-overflow-wrapper .grid {
       flex-wrap: wrap!important;
       align-items: center;
       justify-content: center;
       width: 100%;
  }
}

Best,
Evita

4

Hi Evita,

It works!

Thank you very much!

5

Hi Evita and code experts here

I deleted away the code which you recommended previously, wanting to restore back the previous format but it didn’t work out and my store is now misfigured.

When I added your code back into the theme, it didn’t work as well.

Can you or any code experts advise how to restore my website back to normal?

Thanks!

6

Hey, @fangsb ,

Did you clear the cache?

7

Hi,

I tried pasting the code in the last bottom line as mentioned in the post but it didnot help.

Do you know why?

Kind Regards,

grey

8

Thanks Evita!! You are a Gem.

I had to do it twice before it stuck. Coming out of that page and going back in may have helped, but this definitely works guys!

Evita you are truly appreciated.

9

This solution does not seem to be working, please help.

10

when I go to edit code, I don’t have this asset theme.css or theme.scss

11

Nope, me neither :disappointed_face: