Display Products In Single Row For Mobile

Roxee541
Shopify Partner
26 1 5

Hello Shopify Community,


I am hoping that someone can help resolve an issue for getting products to display in a single row for mobile.

I added this product section to the current theme and this section was heavily customized. I brought it over from a backup theme The client really wanted it this way, so I thought this was the easiest method.

I have improvised it some and do have it working on desktop, but for mobile I am not able to get the 3 across to show up as one across. Please see screen shot.

This CSS seems to be this issue. I can change the width to display one across, but the other 2 products do not show.

.grid-margin-x.small-up-3 > .cell {
width: calc(33.33333% - 1.25rem);
}

I am hoping that there is a way to change this CSS for mobile devices so it shows one across, but for all 3 products to show. Untitled-1.jpg

I can add the @media screen size directly into this custom product section template, so it does not effect the rest of the site.

Any help would greatly be appreciated.

Thanks in advance,

Todd

 

 

Replies 7 (7)
suyash1
Shopify Partner
5006 576 835

@Roxee541 - can you please share this page link?

You are welcome to contact me - suyash.patankar@gmail.com, My timezone is GMT+5:30, to build shopify pages use pagefly
Roxee541
Shopify Partner
26 1 5

Hello Suyash!,

 

Thank you for responding, and I hope you can help. I should have posted the link previously, so my apologies.

https://productosdoctorarrondo.com

Password: lunames

If you view in developer mobile version, you will see the issue on the Product sections.

Thank you so much on advance,

Todd

Roxee541
Shopify Partner
26 1 5

Hi Again Suyash!,

I should also mention that when working in Customize Theme mode, for this product section, it gives you the option of choosing 1 per row for mobile devices, but when I choose this option, it makes it one per row for for desktop as well, so it seems this off as well.

But if there is a CSS solution, I am fine with that.

Thanks again,

Todd

suyash1
Shopify Partner
5006 576 835

@Roxee541 - on actual obile are you able to swipe the products? because using css we can show one at a time than 3, but then since it is slider, other products are not visible and can not be seen until those are swiped, css needed to be used is, please add it to the very end of style-two.css

@media only screen and (max-width: 749px) {
.grid-margin-x.small-up-3>.cell {width: calc(100% - 1.25rem);}
}

 

You are welcome to contact me - suyash.patankar@gmail.com, My timezone is GMT+5:30, to build shopify pages use pagefly
Roxee541
Shopify Partner
26 1 5

Hi Suyash1,

 

Thank you very much for sending the CSS, yes I see what you mean by it being a slider on mobile, does not bring in the other products on that row.

It is supposed to be a slider for mobile, but this is a section I added into the theme I am using, and it's not working properly on this theme, I am not sure what I am missing. There is a piece still missing.

Would it help to make the backup theme live so you can see how the slider looks? Let me know on this.

Is there a way to remove the slider element so all 3 products show? Or if you know how to get the slider to work. It would be fine either way.

Very much appreciate you help on this. If you think you can fix this, but will take some time, I am certainly willing to hire you, if that is all possible.

Thanks again,

 

Todd

Roxee541
Shopify Partner
26 1 5

Hi Again Suyash1,

I was able to get this to work using the original theme collection template, and then modified that to bring in meta-field descriptions.

So, hopefully the owner will be okay with this.

Thanks for jumping in though, appreciate that very much.

Thanks

 

Todd

suyash1
Shopify Partner
5006 576 835

@Roxee541 - great that your issue is solved, do let me know if you need anything else, I will help to the best of my knowledge.

You are welcome to contact me - suyash.patankar@gmail.com, My timezone is GMT+5:30, to build shopify pages use pagefly