Home Forums Community Forum can avada container show 2 or more columns in a row on mobile device

Only users with a registered purchase of Avada can post to the community forum. Please register your purchase here.
Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • dghengli
    Participant
    Post count: 2

    Hey Dear, I need to show 3 columns in a row on mobile.
    I have chosen nested columns (1/3,1/3,1/3) in the container, it do shows well on PC. But the nested columns doesn’t work on mobile, they just shows one by one.
    Can you help?

    joe_en
    Participant
    Post count: 1

    Actually I have the same problem – it would be great if the columns has choice for desktop, tablet and mobile. I created 3 columns in one row, looks good in desktop, but in mobile they are dropped into 3 rows and looks like wasting spaces.

    migstf
    Participant
    Post count: 5

    Create a row especially for mobile, and adjust the layout there. Set the visibility for the rows to large/medium and small respectively

    dghengli
    Participant
    Post count: 2

    avada suggested me a third party plugin named [Fusion Builder Mobile Layout Creator], it works well.

    Tfaurie
    Participant
    Post count: 19

    + 1 on the plugin.
    – 1 on having to purchase an additional plugin.

    Hasse
    Participant
    Post count: 1

    I´m searching for the CSS solution without adding another plugin. 2 columns in mobile/tablet should be a default option in Avada. Still ‘mobile friendly’ if it´s just images, not small text. I have 5 columns in desktop, and want to show 2 columns in mobile / tablet. It´s a massive logo wall that creates a lot of scrolling in default – very bad GUI.

    migstf
    Participant
    Post count: 5

    Multi-column images on mobile will work in certain circumstances.

    The key is that images must be able to fit comfortably within the column, including any padding and/or margin. Otherwise they will wrap all too easily.

    Try setting the Image Max Width in the element settings. It is extremely hit and miss, though, so keep your fingers crossed. It also isn’t guaranteed to work on all the various mobile screen sizes.

    As Tfaurie says, above, it is disappointing that such a basic requirement isn’t available in Avada.

    hismoneytree
    Participant
    Post count: 1

    You can achieve this by doing the following:

    – For example, you want two columns to show on mobile that would otherwise stack on top of each other

    – Duplicate the container that you’d normally show on all screen sizes. In one of the duplicate containers, deselect the ‘small screen’ button. On the other deselect the medium and large screens.

    – In the container that’s only going to show on small screens, create two nested columns

    – In the left nested column, add a CSS class something like max-width-sml1. In the right nested column add a different CSS class something like max-width-sml2.

    – Click the code icon button (black bar) at the top of the page to add some CSS to just this page.

    – Add in the following code which will give those columns a maximum width (you may need to adjust). They are only stacking because of the CSS in the theme. You can override specific CSS instructions by using the !important:

    .max-width-sml1 {
    max-width: 100px !important;
    margin-left: 40px !important;
    float: left !important;
    }
    .max-width-sml2 {
    max-width: 100px !important;
    margin-right: 40px !important;
    float: right !important;
    }

    Obviously, adjust the pixel values to suit and test it. Basically you are telling those columns to have a maximum width or 100px (that will allow them to physically fit left-right on the phone screen. You could also try 49%. I’ve added some margin to push the two items more into the middle.

    Hope that helps!

    marklchaves
    Participant
    Post count: 441

    Here’s one way to do two per row if Grid Layout is used.

    
    /* Let's try to display two blog post previews per row for small devices. */
    @media screen and (max-width: 735px) {
      .fusion-blog-layout-grid .fusion-post-grid {
          width: 50% !important; /* Default is usually 100%. Setting to 50% will get two posts per row. */
          padding: 0.5em !important; /* Optional: Reduce gutters for smaller devices. */
      }
    }
    

    Live demo https://marklchaves.com/two-column-blog-post-archive-on-mobile/

    ti_fap
    Participant
    Post count: 1

    @media only screen and (max-width: 880px) {
    .fusion-blog-layout-grid .post .fusion-post-wrapper, .fusion-blog-layout-timeline .post, .fusion-portfolio.fusion-portfolio-boxed .fusion-portfolio-content-wrapper, .products li.product {
    display: inline-block;
    width: 49% !important;
    vertical-align: top;
    min-height: 0 !important;
    padding-bottom: 10px;
    padding-left: 0px;
    padding-right: 0px;
    padding-top: 0px;
    min-height: 340px;
    }
    }

Viewing 10 posts - 1 through 10 (of 10 total)
Only users with a registered purchase of Avada can post to the community forum. Please register your purchase here.