FROM CACHE - en_header

How to creat a Grid Item for Mobile ?

Re4lityShaper
Tourist
22 0 1

Hello !

I would like to know how to do a grid item section only for mobile. I need 2 row and 2 line, to display collections for mobile.

Thanks you !

Replies 24 (24)
AlexEffron
Shopify Partner
2683 387 1050

Hello, @Re4lityShaper 

Welcome to the Shopify Community.
I read your problem and it seems that I need to analyze your website to provide the solution here.
Would you please share your website URL and if your website is password protected then also provide the password.

 

Re4lityShaper
Tourist
22 0 1
AlexEffron
Shopify Partner
2683 387 1050

@Re4lityShaper I did not get you. Please explain more with screenshots. Because I can see the grid view on mobile on collection page.

Re4lityShaper
Tourist
22 0 1
I would like sth like on the pic below
Re4lityShaper
Tourist
22 0 1
I would like my collections to display in 2 rows 2 by 2.
AlexEffron
Shopify Partner
2683 387 1050

@Re4lityShaper 

Please Go to Online Store -> Themes -> Edit code -> Assets -> theme.scss.liquid and paste this code at the end of this file.

#shopify-section-list-collections-template .grid {
    display: flex;
    flex-wrap: wrap;
}

#shopify-section-list-collections-template .grid .collection {
    flex: 0 0 50%;
    max-width: 50%;
}
#shopify-section-list-collections-template .grid .grid__item {
    width: 100%;
-ms-flex-preferred-size: 100%;
    -webkit-flex-basis: 100%;
    -moz-flex-basis: 100%;
    flex-basis: 100%;
padding: 10px;
}

 

Re4lityShaper
Tourist
22 0 1

Hello,

I also got this, a yellow message above the theme.scss.liquid, I translated and it says : "SCSS syntax support is dropped in themes. Convert .scss and .scss.liquid files to .css or .css.liquid format for better performance of your online store and theme editor."

Dont know if it changes anything, anyway tell me if you got any questions and ty for trying to help me 🙏🏼

🙂

AlexEffron
Shopify Partner
2683 387 1050
Re4lityShaper
Tourist
22 0 1

Home page but for mobile only

AlexEffron
Shopify Partner
2683 387 1050

@Re4lityShaper 

I could not find this section.
1623681200-right.png

 

Please share a screenshot of this section.

Re4lityShaper
Tourist
22 0 1
What section ? The home page is the link i posted and with F12 u can see in
mobile/phone view. Tell me.
Re4lityShaper
Tourist
22 0 1

The screen come from the mobile version of this website : https://www.asos.com/fr/homme/

AlexEffron
Shopify Partner
2683 387 1050

@Re4lityShaper 

Please Go to Online Store -> Themes -> Edit code -> Assets -> theme.scss.liquid and paste this code at the end of this file.

@media only screen and (max-width: 500px) {
#shopify-section-1606755685b2cc5823 .flex--grid .flex__item {
    -webkit-flex: 1 1 50%;
    -moz-flex: 1 1 50%;
    -ms-flex: 1 1 50%;
    flex: 1 1 50%;
}
}

 

Re4lityShaper
Tourist
22 0 1
Re4lityShaper
Tourist
22 0 1

With your code when i edit my theme and put height to 100px for thoses blocs, on Mobile its perfect (square img).

But on PC its not good, its like crushed.

AlexEffron
Shopify Partner
2683 387 1050

PLease set height to 100px. I will set it by giving one more CSS code.

Re4lityShaper
Tourist
22 0 1

Done, i added your code and put height to 100px. For mobile it seems ok but for PC the img is crushed.

AlexEffron
Shopify Partner
2683 387 1050