Home › Forums › WoodMart support forum › Mobile view style

Mobile view style

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • November 3, 2020 at 6:09 pm #238371

    arsiviznet
    Participant

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

    November 3, 2020 at 10:53 pm #238430

    Elise Noromit
    Member

    Hello,

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

    Best Regards

    November 4, 2020 at 4:43 pm #238723

    arsiviznet
    Participant

    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.
    November 5, 2020 at 9:07 am #238939

    Elise Noromit
    Member

    Hello,

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

    Best Regards

    November 5, 2020 at 12:38 pm #239045

    arsiviznet
    Participant

    I left my login information in the private area

    November 6, 2020 at 1:41 pm #239448

    Elise Noromit
    Member

    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

    November 6, 2020 at 7:41 pm #239555

    arsiviznet
    Participant

    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.

    November 6, 2020 at 11:24 pm #239598

    Elise Noromit
    Member

    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

    November 7, 2020 at 3:44 pm #239751

    arsiviznet
    Participant

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

    November 7, 2020 at 4:23 pm #239761

    Elise Noromit
    Member

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

    Best Regards

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)