Mobile view style

Hello there;

Below you have given the code for the shop page to separate the products from each other. this code works perfectly in desktop view.

but in mobile view the products do not appear side by side. only one product appears.

sample picture:https://prnt.sc/vcrso2

css code you provide for desktop view

.woodmart-spacing-30>[class*=col] {
margin-bottom: 30px;
padding-right: 10px;
padding-left: 10px;
margin: 30px 15px;
padding-bottom: 30px;
}

Hello,

Move this code to the Theme Settings > Custom CSS > Desktop and delete it from Global.

Best Regards

Hello there;

example image: https://prnt.sc/vdfqjc

mobile view improved but no gaps between them? how can I do it

thank you

Attachments:

You must be logged in to view attached files.

Hello,

Please provide the site access, the site is under construction.

Best Regards

I left my login information in the private area

Hello,

Please clarify what grid do you mean? I am checking the page and I see a little gap: https://prnt.sc/veo54p

It is not possible to make it bigger as the product gird item would be cut.

Best Regards

Hello there;

No problem in mobile view when editing with elementor on homepage

problem page: https://www.ciftcioglumarket.com/magaza/

how can we fix the store page.

Hello,

Please add this code to the Theme Settings > Custom CSS > Global:

@media (max-width: 768px){
body.archive .woodmart-spacing-20>[class*=col], 
body.archive .woodmart-spacing-30>[class*=col] {
    margin-bottom: 10px;
    padding-right: 5px;
    padding-left: 5px;
    margin: 5px;
}
}

Please add this code to the Theme Settings > Custom CSS > Mobile:

body.archive .product-grid-item.col-6 {
    -ms-flex: 0 0 45%;
    flex: 0 0 45%;
    max-width: 45%;
} 

Best Regards

I am really grateful to you, thank you very much for your efforts.

You are welcome! If you have any questions please feel free to contact us.

Best Regards

[Author]

Posts