Hi All,
I have columns with icons content. I aligned them on mobile view, but on publish they are aligned differently, with large gaps between them on the right side.
It happens on portrait & landscape view. Could someone have a look?
The look I'm after:
What happens on publish:
Thank You!
Here is my public share link (The problem is on "Production Services" page): Public share link
Website link: Live link
Hi @Gourmet,
Definitely a good question. I would highly suggest using flexbox instead of columns as it handles something like this better.
I quickly integrated a flexbox element into your design, and you can view my process here: https://drive.google.com/file/d/0BynZs0dQwPd_TG9BWmU4ajRzQTA/view
The steps I took include the following:
1. Create a wrapper using flexbox that would contain the elements like a row (flex-container-wrapper)
2. Set the flex basis to 1 0 25% for desktop, and 1 0 50% for tablet, then 1 0 100% for phone
3. Create a wrapper that would contain the icon and text (flex-item-wrapper)
4. Move all the icons and text into the "flex-item-wrapper" element
Hopefully this helps 
Hi Micah,
Sorry for the late response. I tried your method, it definitely works better than columns!
Thank you so much, especially for the process video, it helped!
This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.
