I have Different size of the function box
PC: https://cloud.or-marketing.eu/s/qJTiXgTNqkDsKnq
iPad Pro: https://cloud.or-marketing.eu/s/wzEpxRwfHWZ5LFM
suggestion: https://cloud.or-marketing.eu/s/YrzoB4aczk3GSNQ
Different size of the function box
6 replies
Hi,
Could you please explain your issue more?
-Regards
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?
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:
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

Hello Pavel,
thank you very much. I thought Sp Page Builder != CSS :-)
Ok, I will try
Greeting
Olaf
You are wellcome...
Complementing SP PB by CSS code you can make any appearance. Opportunities only of visual interface are limited.