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 15 posts - 1 through 15 (of 25 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: 2

    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: 675

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

    paulstartups
    Participant
    Post count: 19

    Its March 2020 and avada hasn’t solve this problem. I can’t believe they still advise to buy a plugin (Fusion Builder Mobile Layout Creator) when they can add that function to the theme. Hopefully they will add it for next versions.

    paulstartups
    Participant
    Post count: 19

    Hi Marklchavez, I can tell you have more experience about this matter. For mobile, do you have any advice if I want to show 4 columns of small pictures in the same row? I tried using the image carousel element (static), but it only shows 2 images. Thanks in advance!

    marklchaves
    Participant
    Post count: 675

    Hi @paulstartups,

    Thanks for the ask-to-answer. Let me make sure I follow. Can you check the screen grab below and let me know if I’m with ya so far?

    https://imgur.com/a/8GZ7Tht

    If so …

    Old-School versus Hipster

    The first idea uses the old-school WordPress gallery shortcode. It’s minimalist. Images can be different sizes because they’ll all get rendered as squares when using the thumbnail option (as shown). Perfect if you don’t mind dealing with cryptic shortcode. This is my preference.

    A close runner up is Flex. Flex is the hipster solution. The images need to be the same size. And, you need to add some custom CSS in the FB editor.

    I can post the code for both up on GitHub for ya, if you want to kick the tires. 😉

    Just lmk.

    paulstartups
    Participant
    Post count: 19

    Hi @marklchavez, thanks for your answer! In the following screenshot you’ll see what I want to accomplish ( https://imgur.com/5bt1ZNY ). I want to show 4 columns of client logos in mobile devices like they do in superside.com. I read above examples for 2 columns, but what if I need 3 o 4 columns like in this case?

    Thanks again for your help!

    marklchaves
    Participant
    Post count: 675

    Hello @paulstartups,

    Judging by your screen grab, I’m guessing we are in vehement agreement.

    Both solutions scale nicely. I’ve tested with 2, 3, and 8 images. All the same results–one row of images on DT and mobile.

    I checked superside.com. Thanks for that reference. If you inspect their code, you’ll see they use flex. They might use more advanced flex techniques than I’ve showed (e.g. flex-wrap and templates). Just a caveat. I just used vanilla flex.

    Anyway, I felt my instructions and coding warranted a how-to screencast. Here you go!

    https://youtu.be/RcMTkgbPncI

    The code is up on GitHub. Link to the code is in the screencast description.

    Yell if you have any questions! 😉

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