Home Forums Community Forum 2 equal height columns on mobile

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

    If I resize the window the equal height in the right text column disappears. Is there a way to keep the background of the right column the same height as the left column with the image? https://www.vermeijdesign.nl/layout03/

    marklchaves
    Participant
    Post count: 441

    I just visited your site. It looks like you figured it out? Lovely photography and design BTW.

    gabi2
    Participant
    Post count: 17

    Thanks, Mark for the compliment!

    I don’t think I solved it yet. If I resize the window between Ipad size and mobile size the color background doesn’t stretch. Do you know how I can get the background stretch to the same height as the image? (with flexbox stretch or the combination height:0 and padding bottom)

    marklchaves
    Participant
    Post count: 441

    Hi,

    That’s peculiar behaviour. I’d probably look at that more closely when you have time. Just to know why your equal height columns are doing that on mobile only (portrait & landscape). All other viewports are fine for me.

    Anyway, you can try this custom CSS for that page only.

    
    @media only screen and (max-width: 767px) {
    	.fusion-layout-column:nth-child(2) {
    		background-color: rgba(216, 183, 174, 0.78);
    	}
    }
    
    

    Some notes.

    1. You should add this to the CSS only for this page.
    2. The media query will fill in the background for the entire second column for devices smaller than a tablet. Adjust this as needed.
    3. The colour in the code above is not an exact match. Please replace with yours.
    gabi2
    Participant
    Post count: 17

    Hi,

    I have solved the equal height columns using flexbox including centering the text in the column.

    marklchaves
    Participant
    Post count: 441

    Wonderful. Good job. Thanks for sharing your solution 🙏🏽

    gabi2
    Participant
    Post count: 17

    Hi Mark,
    May I ask you one more question about the equal height columns. On my webpage (first post), I have 4 equal height columns ( with the numbers) but I like would like them to be square columns, do you know the best way to achieve this?

    https://paste.pics/670JY

    Thanks in advance

    marklchaves
    Participant
    Post count: 441

    Hi Gabi!

    Thanks for writing. Interesting question. Seems like such an obvious thing to do. Yet, I’m at a loss to know how to do this using Fusion Builder Elements. I’m sure there’s a way.

    I did a quick search on CodePen. I found one example that uses straight-up CSS (no JS, SCSS, Bootstrap, etc.).

    It seems to work pretty well. I forked it, customised, and documented it slightly for your requirement.

    https://codepen.io/marklchaves/pen/oKLwQK

    Hope that helps 😉

    Hey, if you don’t mind, next time feel free to reach out to me personally (just search marklchaves web developer) or open a new thread since this is a different topic. Then others can benefit.

    gabi2
    Participant
    Post count: 17

    Hi Mark,

    you’re right I will do that, thanks for the effort, really appreciate it.

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