How to creat a Grid Item for Mobile ?

Re4lityShaper
Tourist
16 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 !

0 Likes
HardikDavra
Shopify Partner
2317 363 994

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.

 

PageFly Landing Page Builder - #1 Choice For Responsive, SEO-friendly Landing, Product Page.

For fast Communication: Email: parambabla.soft@gmail.com | Whatsapp
0 Likes
Re4lityShaper
Tourist
16 0 1
HardikDavra
Shopify Partner
2317 363 994

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

PageFly Landing Page Builder - #1 Choice For Responsive, SEO-friendly Landing, Product Page.

For fast Communication: Email: parambabla.soft@gmail.com | Whatsapp
0 Likes
Re4lityShaper
Tourist
16 0 1
I would like sth like on the pic below
0 Likes
HardikDavra
Shopify Partner
2317 363 994

@Re4lityShaper  Sorry?

PageFly Landing Page Builder - #1 Choice For Responsive, SEO-friendly Landing, Product Page.

For fast Communication: Email: parambabla.soft@gmail.com | Whatsapp
0 Likes
Re4lityShaper
Tourist
16 0 1
I would like my collections to display in 2 rows 2 by 2.
HardikDavra
Shopify Partner
2317 363 994

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

 

PageFly Landing Page Builder - #1 Choice For Responsive, SEO-friendly Landing, Product Page.

For fast Communication: Email: parambabla.soft@gmail.com | Whatsapp
0 Likes
Re4lityShaper
Tourist
16 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

0 Likes
HardikDavra
Shopify Partner
2317 363 994

On which page do you want to set a 2x2 grid?

PageFly Landing Page Builder - #1 Choice For Responsive, SEO-friendly Landing, Product Page.

For fast Communication: Email: parambabla.soft@gmail.com | Whatsapp
0 Likes