Streaming live at 10am (PST)

Content not aligning correctly on mobile


#1

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


#2

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

  • Micah

#3

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:


#4

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