2 products per row on mobile !!

Hello,

Can you please provide the link to your site so that I can help you regarding that.

Thank you.

Hey @sam

Thanks for reaching out ! here is the link to my category listing page –> https://www.shirtsnatch.com/browse/ but i want this change to even work on products that are displayed via shortcodes ??

@media (max-width: 768px) {
ul.products li.product {
width: 48%;
float: left;
clear: both;
}

ul.products li.product:nth-child(2n) {
clear: none;
float: right;
}
}

Give that a try.

I recommend using our Theme Customisations plugin to make this change.

Hi again James !

It is working when i resize my window on my desktop, but when i actually open the site on my mobile phone there is no change and everything thing is as it was before ??

Any help ?

Hello,

I can see that all okay in my mobile.

https://awesomescreenshot.com/0415kisx82

You can clear your mobiles browser cache if you do not see the same.

Thank you.

Hi guys. I tried all of the solutions mentioned in this forum and yet to have any success! Could someone please take a look at my page and recommend a fix?

https://www.meetmarina.com/how-not-to-be-basic/

REALLY APPRECIATE YOUR HELP.

Best,

RK

Hello @rileykovatch,

You can try adding this in your Custom CSS for adjusting this:

@media screen and (max-width: 750px){
.vc_row.grid_section .vc_column_container {
    float: left;
    width: 50%;
}}

Hope that helps.

Thank you.

Feel free to ask if you need any other help.

• This reply was modified 7 years, 10 months ago by Sam.

Hi Sam,

Thanks for the reply. That didn’t quite work. My text and titles all got pushed left (undesired outcome) at the smaller screen size but the products still displayed as one per row.

Just FYI I have WooCommerce items displayed with the Products element and custom product displays (photo, button, text, etc.)

Any other suggestions? I have a developer telling me it would take a lot of custom code and billable hours to fix this but from the forums I believe there’s a CSS fix that shouldn’t be too much trouble.

Here’s a link to a screenshot https://zandersteele.box.com/s/abo2p1mnuwglvldtavwidpjpzta63ylg

Appreciate your help,

RK

Hello @rileykovatch,

You can try this instead for better result:

@media screen and (max-width: 750px){
.vc_row.grid_section .vc_column_container.vc_col-sm-4 {
    float: left;
    width: 50%;
}
.vc_row.grid_section .vc_column_container.vc_col-sm-3 {
    float: left;
    width: 50%;
}
.vc_row.grid_section .vc_column_container.vc_col-sm-6 {
    float: left;
    width: 50%;
}}

Hope that helps.

Thank you.

Hi @jameskoster,

Could you please give me some pointers on where I should paste the following code to?

@media (max-width: 768px) {
ul.products li.product {
width: 48%;
float: left;
clear: both;
}

ul.products li.product:nth-child(2n) {
clear: none;
float: right;
}
}

I keep on getting error
Parse error: syntax error, unexpected ‘:’, expecting ‘,’ or ‘)’ in…

I apologize, I am still a beginner and I appreciate your help in advance.

Hello @mtmf,

You can add the code under Appearance > Customize > Additional CSS which is the default feature of WprdPress.

Or can install a Custom CSS plugin and add the code there.

Hope that helps.

Thank you.

It worked @soumendra.

Appreciate your help!

It’s a pleasure helping you. ??

Hi! please @soumendra can you help me?? i want 2 products per row when store is viewed on mobile in the site im developing, i’m stucked.

https://tienda.smellit.cl/tienda/