Streaming live at 10am (PST)

Content not aligning correctly on mobile

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:

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

  • Micah
1 Like

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! :blush:

1 Like

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.