How to show 2 products a row on mobile homepage for Modular Theme?

Solved
Highlighted
Tourist
13 0 0

Hello there,

I'm using Modular Theme.

Is there a way to show 2 products a row on mobile homepage?

Also, I would like to show the product photos in square grid instead of vertical rectangle.

Does anyone have a solution for it?

Website: https://hillaryaudesign.myshopify.com

Password: oootest123

0 Likes
Highlighted

This is an accepted solution.

 

 

.collectionBlock-image { background-size: contain !important;}
@media only screen and (max-width: 768px) {
.s1 {
    width: 50%;
}
.collectionGrid-row.collectionGrid-row--grid {
    width: 100% !important;
    padding: 0 !important;
}
}

 

 

Hello
Add this css at the bottom of
Online Store->Theme->Edit code->Assets->theme.scss.liquid

 

Want to modify or incorporate custom changes on store, Hire us
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
Highlighted
Tourist
13 0 0

Hello @oscprofessional ,

Your solution works! The product appears as 2 in a row.

Thank you so much for your help!

I still want to make the product photos square but not rectangle.

Could you help with this too? 

0 Likes
Highlighted

Update these css above...

Want to modify or incorporate custom changes on store, Hire us
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
Highlighted
Tourist
13 0 0

@oscprofessional 

I've updated the css but the product images are still rectangle.

Am I missing something?

0 Likes
Highlighted

Please try again copy and paste the code !

Want to modify or incorporate custom changes on store, Hire us
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
Highlighted
Tourist
13 0 0

@oscprofessional 

Sorry I missed the code updates.

Just updated it and it works. Thank you!

I found that the featured product headings are not aligned to centre on mobile version after adding the codes.

Is it possible to be fixed?

0 Likes
Highlighted
h3.collectionBlock__title a {
    font-size: 14px;
    /* max-height: 33px; */
}
Want to modify or incorporate custom changes on store, Hire us
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
0 Likes
Highlighted
Tourist
13 0 0

@oscprofessional 

I tried copying the code to the bottom of the css but the headings are still not aligned to centre.

Do you have any ideas?

0 Likes
Highlighted

what is the current issue you are facing ?

Want to modify or incorporate custom changes on store, Hire us
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
0 Likes