Flex Layout Rendering Incorrectly on Tablets and Mobile Devices

[bmatty (Matt Schroepfer)]

I used a flex grid layout to build out the main section in my website. However, it does not render correctly on tablets and mobile devices.

The padding and margin rules appear to be completely ignored. The sections are stacked one on top of the other. The positioning is set to auto. In desktop view, I have it as a two-column layout. In tablet and mobile view, I have it as a single column layout.

---

Here is my public share link: https://preview.webflow.com/preview/lead-marketing-design?preview=56ebdefc288279d7cf17d400e9202444

[sabanna (Anna)]

Hi, @bmatty.

Make “flex wrap” display: block on the tablet. It should help.

Cheers,
Anna

[bmatty (Matt Schroepfer)]

Thank you @sabanna!

That resolved the issue

However, now the content is slightly out of order. I want each image to be above its corresponding text. For example, the image of the video camera should be above the text “Videography.”

Best,
Matt

[sabanna (Anna)]

Ok, got it.

Then there is another way to fix it:

1. Set “flex wrap” flex-direction: row, NOT COLUMN. Keep the option wrap children.
2. For the “flex column”, set sizing not 40% but 100% (in child settings)

Regards,
Anna