Avada Forums Community Forum How to put 2 products side by side on mobile instead of just having 1??

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

    Hi guys,

    Does anyone know of any way to have 2 products next to each other on mobile instead of just having 1??

    I have looked into the avada theme options – responsive, used those settings but basically all i seem to get is as soon as it hits the breakpoint, all of my products shift into 1 product per row, instead of breaking down 1 by 1.

    So my shop on desktop has 4 products in a row, when i take the window size down on the desktop bit by bit it stays at the 4 products in a row but as soon as it hits the responsive setting it just jumps straight down to just 1 product per row, i have moved my break point down to a smaller setting than a mobile, that way the 4 products in a row still stay on the screen, but it basically just looks like the site is not responsive.

    Has or does anyone know how to have 2 products in a row on mobile, but still have the desktop version as 4 in a row??

    Any help would be much appreciated.

    Thanks guys

    Michael
    Keymaster
    Post count: 715

    Hi @fatshady360

    It is by design and intention that Avada only shows a single product per row on mobile devices. There is a plugin that you can use to change this (we did not create this plugin) -> http://bit.ly/2OIRhjW

    Thank you kindly

    Mobitex
    Participant
    Post count: 3

    Hi fatshady
    i found a custom css solution for this issue, but you will have to play with some stuff.

    First of all, this only happens in mobile view, so you will have to use @media css


    @media
    only screen and (max-width: 800px) {
    }

    Then, inside there, you will do two things, first, you will prepare the wrapper (ul) to have a flex behavior, in my case:

    @media
    only screen and (max-width: 800px) {
    /* lists on mobile */
    div.woocommerce.columns-4 > ul {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    }
    Then you will change the width and other stuff for the elements into there (li)
    div.woocommerce.columns-4 > ul > li {
    width: 50%;
    box-sizing: border-box;
    }

    Maybe you will need to inspect the selectors and change them to achieve it, but you can try with this custom css


    @media
    only screen and (max-width: 800px) {
    /* lists on mobile */
    div.woocommerce.columns-4 > ul {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    }
    /*li elements on mobile*/
    div.woocommerce.columns-4 > ul > li {
    width: 50%;
    box-sizing: border-box;
    }
    }

    it worked for me, good luck with it!

    jojojijijojo
    Participant
    Post count: 8

    No offense, but thats the stupidest “by design” idea ever. Except if the purpose is to kill store conversion and make it look like a design from the 90s.

    Halaly
    Participant
    Post count: 6

    Thanks for the advice Mobitex!

    Can i just copy and paste your code, is it enough?
    It doesnt work when i paste it on the additional css area on the “customizer”. Can you give me a tipp what i have to do?

    Thanks!

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