Blocks not stacking vertically in mobile view (within Bricks)

How To
1

Hi,

I’m running 1.5 on a test site and can’t seem to figure this out.

All good in desktop mode - I have 3 columns (200px | 500px | 400)

image
image3582×916 136 KB

In mobile portrait view, with the blocks stacked vertically and each set to 100% width, I see this:

image
image3574×920 136 KB

All is good when I preview it:

image
image1640×890 47.7 KB

If I remove the width sizes in desktop mode and then switch to mobile, the blocks stack correctly.

Any ideas?

2

Would need to see settings for Mobile Portrait view to see what you have. When you say the blocks are stacked verticly, do you have the section they are in with flex direction set to column?

Did you set the columns to 100% while in portrait mobile view so they change to 100% rather than the fixed px widths you set in desktop?

3

Try the main container

Content > Flex Wrap > Set to Wrap to see if it solves your issue.

4

True.

True. Sometimes front end and builder behaviour are different.

5

Hi - I’ve replicated the issue and recorded it:

Thanks,

6

That didn’t work. Thanks for the suggestion.

7

image
image1920×929 47 KB

I replicated the same as how you did.
I set 100% width for the 3 containers on mobile breakpoint…when I switched to mobile view, I see this.

8

So… a bit of a mystery, then.

I’ll start again, re-uploading 1.5

9

I’ve made the screencast.

10

Thanks - that’s what I’m trying to do.

There’s something odd happening. Take a look when I open the template… I don’t even see the page’s elements:

I’ve installed Bricks on a test site with no plugin other than the Classic Editor.

Odd.

11

Alright. I’ll try to replicate again using blocks under the section later when I have free time later. :slight_smile:

12

It works for me OK, just like you showed in the video, Lawerence. The contaniers show 100% width on portrait mobile in the builder.

What is your hosting setup?

13

It’s a fresh install on Cloudways (Vultr).

I don’t have an issue on my personal site:

image
image3010×1378 179 KB

14

Is the Cloudways site hooked up to Cloudflare? Is it running any sort of caching?

15

It’s proxied via CF, yes.

I’ve turned that off now. Will see if it makes a difference.

16

It may take a few mintues for it to stop caching. Also, Chromium may still look at cloudflare IPs instead of the real IP unless you close the browser and start it again.

17

Bingo.

It worked.

You are a genius!

2 Likes