Avada Forums Community Forum 2 Column Product View on Mobile Device

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • ♥Jaylin
    Participant
    Post count: 5

    Is there a way to display 2 columns of products/categories on mobile devices?

    easierone
    Participant
    Post count: 36

    you can try it by add class (probably it will be <div class>)

    class=”col-xs-6″

    ♥Jaylin
    Participant
    Post count: 5

    I am sorry, but could you clarify where to add this div class?

    Fonex2019
    Participant
    Post count: 1

    For WooCommerce Shop Page on Mobile to see 2 Columns i used this CSS


    @media
    only screen and (max-width: 530px){
    .fusion-body .products li {
    width: 155px!important;
    }
    }

    #main{
    padding-left:15px;
    padding-right:15px;
    }

    I hope it helps

    sureshpmi
    Participant
    Post count: 2

    Where did you add this css code?

    Halaly
    Participant
    Post count: 6

    I tried it now. It works when you add it in the additional css are on the “customizer”. Thanks Fonex2019

    Halaly
    Participant
    Post count: 6

    Do you have an advice for automatic hyphenation? It doesnt look very well without it. Thanks again

    mfuatnuroglu
    Participant
    Post count: 1

    It works. Thanks Fonex2019

    dosortres
    Participant
    Post count: 2

    it works but not well. With this media query the two columns do not fit perfectly.
    On some devices, larger, in fact there will be white space or even a single column will be seen (in a small device).
    Can we have a better solution with two columns and some fluid layout?

    thank you!

    Rocchi
    Participant
    Post count: 1

    I had a similar issue. I used a percentage instead of a fixed size in px and it worked well for me. I am no expert but it might be worth giving it a shot.


    @media
    only screen and (max-width: 640px){
    .fusion-body .products li {
    width: 50%!important;
    }
    }

    #main{
    padding-left:15px;
    padding-right:15px;
    }

Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.