Inconsistent Column Widths for Mobile layout

  • andyt1980

    (@andyt1980)


    9 years, 11 months ago

    Hi,

    I’m using Beaver Builder Lite for the first time. Generally it works great but I’m having trouble getting columns looking consistent on mobile view.

    You can see the build here: http://tinyurl.com/jdwcmls

    If you look at the first row of 3 blocks, I achieved this layout by going into the Row Settings and entering 0px for the left/right padding and margin. I then went into the Column Settings and entered 0px for the left/right padding, leaving left/right margins at 20px. This seems ok on desktop view (although I would like to reduce the spacing between each column),but on mobile view, if you resize your browser between 430px and 479px the column is slightly narrower than the text column above it that starts ‘A phrase…’.

    So on the next row of 3 columns I tried a different technique. I left the margins at 20px in the Row Settings ,but set the Row Padding to 0.
    Then for the 1st column (Pre School Room) in the Column settings I set the left margin to 0 and the right to 20px. I then set the padding to 0. I then did the same for the 2nd column.for the 3rd column I set both column and padding to 0. I also had to resize the column down from 34% to 32.2% so it was the same height as the first 2 columns.
    However, in mobile view the first 2 columns are now a different size to the 3rd column due to the right margins.

    I also had to turn off ‘Enable Auto Spacing’ in Global Settings because this was removing padding from either the row or columns and causing me more issues.

    Before posting this I had used some custom CSS to make things consistent, but it seemed a bit of a hacky/messy way of achieving things and I thought BB could achieve a simple 3 column layout without it.

    So my question is am I going about this all wrong? Whats the best way to make columns a consistent width on all views?

    https://ww.wp.xz.cn/plugins/beaver-builder-lite-version/

Viewing 8 replies - 1 through 8 (of 8 total)
  • Thread Starter andyt1980

    (@andyt1980)

    9 years, 11 months ago

    I managed to achieve what I wanted with some custom CSS on the Welcome text area.

    However, if I wanted to reduce the spacing between the columns, how would I do this and keep the height of each column the same??.
    If I try reducing the right margin on the first column and then reduce margins on the other columns they are all different heights, I’ve tried checking the equalize column heights option but this tends to keep 2 columns the same height and then 1 column slightly different.

    Plugin Contributor Ben Carlo

    (@hinampaksh)

    9 years, 11 months ago

    Hey Andy,

    Thanks for posting!

    Which part on your site are you having issues with? Is it the Rooms part with the 3×2 layout? If so, try applying your background colors to the columns instead. With the equal height option enabled, only the column containers adjust depending on the height of the other columns, the module or its container adjust depending on the content inside if that makes sense. 🙂

    Let us know how it goes!

    Ben

    Thread Starter andyt1980

    (@andyt1980)

    9 years, 11 months ago

    Hi Ben,

    Yes its the 3×2 Room blocks that I’ve been having issues with.
    I’ve copied the whole page layout to a new page to test any suggestions you make so you can see any issues that arise.

    URL:http://tinyurl.com/h2why3b

    I have already added the background colors to the columns, only the baby room box was using custom css for the bg color, which I’ve now added to column settings.

    The only issue I have now is if I want to reduce the spacing between columns it messes up the widths of the columns on mobile view.

    If you look at the top row of columns I’ve reduced the right margin from 20px to 10px on the 1st and 2nd column. This looks fine on desktop view, but on mobile view the 1st and 2nd column are a different width to the 3rd column.

    So how do I reduce the spacing between columns without affecting the mobile view?.

    I could change the margins back to 20px with CSS for the mobile view but that seems like a messy solution to something I thought the builder would be able to do anyway.

    Plugin Contributor Ben Carlo

    (@hinampaksh)

    9 years, 11 months ago

    Hey Andy,

    Actually, on the top row, the 3rd row has a different width even on desktop view. Reason for this is because it has a 20px margin on the right, while the first two don’t.

    If you want, you can also reduce the right margin of the last item to 10px, or just reduce the left and right margins of all items to 15px, giving each a spacing of 20px if that makes sense. 🙂

    Hope this helps!

    Ben

    Thread Starter andyt1980

    (@andyt1980)

    9 years, 11 months ago

    I’ve tried both solutions you suggested above.

    The first row I just reduced the right margin on the last column to 10px, this causes an issue with the last item not being flush/level with the content above it, see screenie: http://prntscr.com/brk0xa

    On the 2nd row I tried the other solution by making all left and right margins 15px, this caused the same issue as above but on the first item instead.

    I really need to make the egdes of each row flush with each other. Hope that makes sense.

    Plugin Contributor Ben Carlo

    (@hinampaksh)

    9 years, 11 months ago

    Hey Andy,

    Gotcha! So the reason why the sizing isn’t consistent is because you’re giving them inconsistent margins, which affects the width of the columns. You’re gonna have to make sure that the total of the margins you placed on the side for each column is equal.

    Since you want the first and last column to touch the edge of the content area, you can leave the first’s left margin and last’s right margin to 20px. Then set the first’s right margin and last’s left margin to 10px. Then set the middle’s left and right margin to 15px. Can you give that a shot and see if it’s what you’re looking for?

    Ben

    Thread Starter andyt1980

    (@andyt1980)

    9 years, 11 months ago

    Hi Ben,

    Sorry to be a pain, I tried your solution for the top row but due to the different left and right margins on the first and last column in mobile view the columns have unequal spacing, see screenie: http://prntscr.com/bs2pkp

    This is why I originally ended up resorting to custom CSS to get everything even on all views.

    Plugin Contributor Ben Carlo

    (@hinampaksh)

    9 years, 11 months ago

    Hey Andy,

    Totally forgot you’re disabling our Auto Spacing feature. You’re gonna have to use custom CSS to achieve what you want.

    The Auto Spacing feature is what allows our page builder to control the spacing when it hits mobile view. It resets the left/right padding for rows and columns and all margins for rows, columns, and modules to the values set in the global settings.

    If you need help with the media queries, we’ll be more than happy to assist. Sorry to say but that’s the best we can offer at this point.

    Ben

Viewing 8 replies - 1 through 8 (of 8 total)

The topic ‘Inconsistent Column Widths for Mobile layout’ is closed to new replies.