Different Size Of The Function Box - Question | JoomShaper
Black Friday sale is live with flat 50% OFF. Sale ends soon! Grab your deal now!

Different Size Of The Function Box

O

OR-Marketing

Helix Framework 4 years ago
0
6 Answers
Mehtaz Afsana Borsha
Mehtaz Afsana Borsha
Accepted Answer
Support Agent 4 years ago #41807

Hi,

Could you please explain your issue more?

-Regards

0
O
OR-Marketing
Accepted Answer
4 years ago #41808

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?

0
Mehtaz Afsana Borsha
Mehtaz Afsana Borsha
Accepted Answer
Support Agent 4 years ago #41902

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

0
Pavel
Pavel
Accepted Answer
4 years ago #41940

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

0
O
OR-Marketing
Accepted Answer
4 years ago #42026

Hello Pavel,

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

Greeting Olaf

0
Pavel
Pavel
Accepted Answer
4 years ago #42029

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

0