Bricks now with Unlimited Sites & Upcoming Lifetime Price Increase

WIP: How to fix mobile screen

I have a bar on the side of my mobile views. Anyone have an idea what’s going wrong here?

Hi Jorn,

I think the problem is related to your header styling. Please remove every “left” or “right” setting from every element you’ve applied inside your header and see if the problem is still there.

The best way would probably be to remove everything in the “Layout” Tab of every element on every breakpoint to get a fresh start.

Then, add the following settings:

Menu wrapper (direction: row, justify-content: space-between, align-items: center)

Nav Menu (just a margin-left: auto; to shift it to the right)

Best regards,
timmse

Hoi Timmse,

I did that but it didnt work. The website is www.ballsonly.nl maybe u can see whats going wrong?

To be a bit more specific. I followed exactly every step you suggested, but unfortunately it didn’t help.

All layouts are now also gone.

Well, but at least this is a good start because your header now works much better than before - on every breakpoint :slight_smile:

After a lot of trial and error, I found two problems that causes the gap to the right.

#1 You’ve set a padding on your posts elements » Style » Layout » Padding at the Tablet Portrait Breakpoint. Please remove that, because it will mess up the Grid Layout. Don’t be afraid, we will add it back later in step 3.

#2 Congrats on your first bug find :smiley:
The class .bricks-element-posts is missing a property. Please add the following under Bricks » Settings » Custom Code » Custom CSS to fix the problem temporarily. I’ve just added this to our internal bug tracker so it will be fixed in Bricks 1.3.7.

.bricks-element-posts {
  overflow: hidden;
}

#3 Add the padding back
The best and easiest way to add padding around your content and to ensure, that your elements won’t stick to the edges, is to apply the padding at the root container. The root container is always the outer container, so you can simply add this where you’ve added the CSS from #2:

.bricks-container.root {
  padding: 15px;
}

If you do anything properly, your problem should be solved :partying_face:

1 Like

Ps: I’ll move this thread to the bugs section, because it contains at least one Bricks Bug.

I have a question about #1.

You say: #1 You’ve set a padding on your posts elements »

Where is this? U mean on my brick template that i made for posts, the homepage or the theme style?

I dont have any padding om the post template.

The problem is related to the Posts Element and you have several of them, especially on your homepage. So please go to your homepage, click “edit with bricks” select the Posts Element in the structure panel, go to style » Layout and I bet you’ll find a padding (at least in every posts element on your homepage) :smiley:

I didn’t check the other pages, but as long you’re using the posts element anywhere else and use the same settings as with the ones on the homepage, remove the padding as well (in your screenshot, the last element in the structure panel is the posts element).

1 Like

Hi Timmse,

Ugh stupid… So I looked at paddings, but not on mobile verses. Only on desktop, I have now followed all your steps and it worked!

It works as it should. thnx!!!

1 Like