Keeping the columns' width fixed when resizing the page?

Beaver Builder
1

My website:

http://www.factorydesk.com/home/

I’m trying to have a heading module right next to a content slider module. I’ve played around with margins and this is what I came up with:

http://screencast.com/t/JqsYVKQtQQk

However, when I resize the page below 1050px width, the content of 2 columns starts overlapping each other:

http://screencast.com/t/heMo6uUFSGr

What methods could I use to achieve the desired effect? I can also have a set of 2 same modules to be displayed on top of each other only on Medium and Small devices, but “threshold” for Medium devices appears to be around 987px mark (any way to change that?), so I still need the modules to look good between 987px and 1050px.

On another note, what CSS code should I use to make certain columns and/or modules not show up below certain width of browser’s window?

2

Hey Maurice,

So the problem there is caused by the negative margins you’ve set for the modules. Can you set those margins to 0 instead, set the text on the left column to align right, instead of center, then add the CSS snippet below. You’ll need to add an extra class to the Content Slider module though, fl-slide-align-left.

.fl-slide-align-left .fl-slide .fl-slide-foreground {
  margin: 0;
}

You can change the responsive breakpoints under Tools > Global Settings > Responsive Layout.

The columns are by default set to 100% width when it reaches the small responsive breakpoint. You can change this under the Column Settings > Advanced > Responsive Layout. Just set a custom width, e.g., if you want those 2 columns to be side by side, set them both at 50% width.

Hope this helps! :slight_smile:

Ben

3

Hey Ben, thanks, that worked!

I’ve also created another set of those 2 modules for Medium & Small Devices only. On Small devices the contents of the slides (the heading more precisely) seem to be automatically centered (any way to prohibit the heading changing to a smaller font?).

On Medium devices however, the contents are not centered:

http://screencast.com/t/zD5OwGOm

I’d assume the container itself is centered, but not the text within the container. I’ve tried applying this CSS:

.fl-slide-align-center .fl-slide .fl-slide-foreground {
  margin-left: auto;
  margin-right: auto;
}

Any help with that?

4

Also how about applying a CSS code to a particular column and make it disappear below specific (non-global set) resolution? (This is for another section of the website)

5

We can’t keep the font-size on small devices, but we can set it so it’s the same font-size on the large devices. You can use the CSS snippet below to do so. If you changed your small responsive breakpoint, change 768px to your new setting.

@media (max-width: 768px) {
  .fl-builder-content .fl-module-content-slider.fl-slide-align-center .fl-slide .fl-slide-title {
    font-size: 30px !important;
  }
}

To align the title on medium devices, you can use the CSS snippet below. If you changed your medium responsive breakpoint, change 992px to your new setting.

@media (max-width: 992px) {
  .fl-slide-align-center .fl-slide-title {
    text-align: center;
  }
}

You can add a class to that specific row/column/module fl-hide-custom-width then add the CSS snippet below.

@media (max-width: custom-width-here-px) {
  .fl-hide-custom-width }
    display: none !important;
  }
}

Ben

6

Thank you, I applied the 2nd and 3rd snippets, worked!

7

No worries! Is the first code not working?

Ben