Custom responsive breakpoints

Beaver Builder
1

Hello,

Start situation :

  • with default medium and litle screen size responsive breakpoints :

    > i create 2 * 50% width column

      = when screen is at the little screen responsive breakpoint, two horizontal columns come to 2 vertical columns. Fine.

  • i change the medium and little Resp.Brek.Point and set each colomn to be at 80% width at medium RBP and to be at 100% width at little RBP

    > at medium screen size : columns are at 80% width but not horizontally centered like a margin (0 , auto) but are like no margin and stay on the left on the screen.

    > at little screen size : colums are not at 100% as i set but like 50% and are not horizontally centered but are on the left of the screen.

What can i do to have my columns at 80% or 100% AND horizontally centerd ?

Thanks guys.

2

Hello Adelino,

The reason why they are left aligned is most likely because your module was using the left alignment as well. What we can do is use media queries to set a different alignment for when the medium and small breakpoints are met. You can read more of media queries here. If, as a starting point, you would want us to help you with your concern, please reply back with the page URL you are having the problem with coupled with a temporary admin access to your site so we may check.

Ben

3

Well,

Yes, I know media queries and i use them for my theme responsive beahviour.

I don’t need to create a media querie for each module.

I just need to target the row behavior, i will try

4

Hey Adelino,

No problem! Just in case you need further assistance with the Beaver Builder plugin/theme we’ll be more than happy to assist you :slight_smile:

Ben

5

Nop, my own created theme :wink:

6

Well, i think i understand the problem.

With the small device breakpoint, row margin are like (0 auto)

Not with the medium device brekapoint. This is an issue insn’t it ?

The problem is on the medium device left and right margins

7

ps : on the ROW L and R margins

8

hi again,

i did some tests.

The resulats are i cant have a row horizontally centered at the medium responsive breakpoint.

I target the .fl-col class to change alignment with media queries but the margin (0, auto) not working.

But it’s working fine wth the small breakpoint

9

I aslo try to media querie .fl-col-group but no succes like fl-content class

If i had a left margin in px to those fl classes it works but canoot center them like in small device

10

Hi Adelino,

Couple your margin:0px auto; with a float: none; and that should do the trick. The thing is, if you use a custom width value for the column breakpoints, the float changes to left so putting two columns side by side would be possible. If left to default value, the float changes to none so the columns stack on top of each other. Hope this helps.

Ben

11

I trie with all defaut values also and i did nor work.

Also, everything is fine with the margins of the small responsive breakpoin, with defaut width or custom width

The problem with non centered row is only with the medium responsive breakpoint.

I will try your trick but it should be working without it…

12

It’s working with the float none trick.

But, whut this trick or seems to be apllied by BB on the small device breakpoint, with defaut AND custom value, and not on the medium ?

13

Hi Adelino,

That’s actually because the Medium Breakpoint is geared towards tablets. Most tablets have wider resolution so they can afford to have 2 or more columns stay side by side. Whereas the Small Breakpoint, it is for mobile phones having a very narrow resolution where we have no option but to stack the columns on top of each other.

Hope this helps!

Ben