Content not aligning correctly on mobile

[Gourmet (Ifat)]

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

[mistercreate (create.something)]

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

• Micah

[Gourmet (Ifat)]

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!