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 - 16 through 25 (of 25 total)
  • Author
    Posts
  • paulstartups
    Participant
    Post count: 19

    Hello @marklchavez….I trust you’re doing well in this crazy time of Coronavirus. I can’t thank you enough for your help, I knew you were the right one to ask. I used the flex solution but since the images have different width, there is no space between 2 of them. Is there any css code that I can add to prevent that? Thanks again!

    marklchaves
    Participant
    Post count: 692

    Hi @paulstartups,

    We are doing fine so far. Thanks!

    Ok. Excellent.

    Great question regarding column gaps. Two approaches for this.

    No Code

    I did gloss over that issue. It’s because when I deal with logos I always turn them into squares with a little buffer on the edges so they’re all framed consistently (transparent backgrounds of course). IMHO, this is the best way to handle it without mucking around with Avada’s CSS.

    Code

    If you want to try to slap more code on, I found this but haven’t tried it. https://stackoverflow.com/questions/20626685/better-way-to-set-distance-between-flexbox-items

    See the approved answer and accompanying JSFiddle.

    The other option is to use CSS grid instead of flex. That’s more advanced/complicated and it doesn’t play well with Avada’s CSS in this case. I can whip that up if needed, but I don’t recommend it. It’s a rabbit hole.

    Hope that helps!

    paulstartups
    Participant
    Post count: 19

    Hey @marklchavez, glad to know you’re doing well!

    Thanks, that helps a lot. The code option looks interesting and I’ll give it a try first, but the logos in transparent squares it’s a clever and practical solution and I think there is no need for the CSS grid one. In any case your advices were really helpful, thanks again 🙂

    marklchaves
    Participant
    Post count: 692

    Hi @paulstartups,

    I just found a nice trick on MDN for adding gutters to flexboxes. It’s a bit of a “hack” IMHO, but it works 😉 Again, my preference to have a bit of whitespace in the logo/images. But, I recognise that this is not always possible or efficient.

    I updated my gist. Here’s the CSS for your convenience.

    
    /* CSS for adding gutters with no wrap. */
    #flex-gallery .fusion-builder-row.fusion-row {
      display: flex !important;
      margin: -1% !important;
    }
    #flex-gallery .fusion-builder-row.fusion-row > * {
      margin: 1% !important;
    }
    
    paulstartups
    Participant
    Post count: 19

    Hey marklchaves! How are you doing?

    That’s an interesting trick, thanks a lot! I liked the other solution you gave me, which worked perfectly, but I’ll try this one too…. it’s good to have many solutions!

    Did you get the message I sent to your photography tour site?

    marklchaves
    Participant
    Post count: 692

    Hi Paul,

    Yes. Got your email. I replied a few days back. I just resent in case the first one went to spam?

    Agreed. It’s nice to have a few tricks in the bag. And, if we want to do one better in terms of performance, we’d put all our logos into CSS sprites. Lol.

    I had a couple sprites examples using Avada before. I’ve already shut that site down.

    I just remembered I have a couple demos on CodePen. So, I think my next homework assignment is to “marry” our flex solution with sprites in Avada and write that up 😉

    Enjoy!

    paulstartups
    Participant
    Post count: 19

    Hey Mark! Probably it went to spam, I’m going to check.

    I didn’t know what Sprites were until now, I just read about it…of course it will make the sites faster. Great idea!
    It would be great, but take your time there is no rush for it. Thanks for sharing your knowledge 

    notionmotion
    Participant
    Post count: 3

    Thanks for this. It was a tremendous help.

    oldcompany
    Participant
    Post count: 1

    @hismoneytree,

    Thank you for the css codes, i managed to do it for the first 2 rows but on the last row, the right column is not responding to this css, are you able to advise. You can view my website at https://www.gogoshoppes.com/ on Home page, under SHOP BY CATEGORIES section.

    Many thanks.

    Ammar. S
    Keymaster
    Post count: 1029

    Hello Everyone

    With our new version 7.0 now you have the freedom to show more than 1 column on mobile phone or any other screen size, please check out our version 7.0.1 and you can check this video on how easy it is to set the layout on different screen sizes => https://www.youtube.com/watch?v=5wpCNSpv7_s&feature=youtu.be

    Thanks

    -Ammar

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