Different size of the function box - Forum | JoomShaper
Awaiting an answer Helix Framework

Different size of the function box

Asked by OR-Marketing 4 years ago Last activity 4 years ago

6 replies

Mehtaz Afsana Borsha Staff

Hi,

Could you please explain your issue more?

-Regards

OR-Marketing Asked this

The function boxes are displayed in different sizes. One is the view on the PC, the other on the iPad pro.
Even on the PC it is difficult to get a uniform size. Maybe you could set a fixed height for the box and a fixed height for the image?

Mehtaz Afsana Borsha Staff

Hi,

You can set background color for columns not addons, so they are equal if we talk about height.

  • padding inside addons
  • margin between column

Please follow this VIDEO:

https://www.youtube.com/watch?v=acZCjxEB3K4

Pavel
4 years ago · edited

Hi.

SP Page Builder has no control in the range from 1200px to 992px (that personally I always caused bewilderment). And even if this control was, it would require a lot of handmade.

Therefore, it is much easier and more efficient to do this through CSS.

Add your own class name to the section. And use the following code

.your-own-class-name .sppb-addon-wrapper,
.your-own-class-name .sppb-addon-wrapper>div {
    height: 100%;
}

This will make such an appearance.

If you want the buttons to be aligned the same, then instead of the code above, use the following code.

.your-own-class-name .sppb-addon-wrapper,
.your-own-class-name .sppb-addon-wrapper>div,
.your-own-class-name .sppb-addon-feature,
.your-own-class-name .sppb-addon-content {
    height: 100%;
}

.your-own-class-name .sppb-addon-content {
    display: flex;
    flex-direction: column;
}
.your-own-class-name .sppb-media-content {
    flex: 1;
    display: flex;
    flex-direction: column;
}
.your-own-class-name .sppb-btn-custom {
    margin: auto auto 0 !important;
}

If you need some more margin-bottom for buttons, change this value as you like

OR-Marketing Asked this

Hello Pavel,

thank you very much. I thought Sp Page Builder != CSS :-)
Ok, I will try

Greeting
Olaf

Pavel

You are wellcome...
Complementing SP PB by CSS code you can make any appearance. Opportunities only of visual interface are limited.

Log in to reply.