Awaiting an answer SP Page Builder

I want config width to show

Asked by TRAN HUU QUOC VAN 3 years ago Last activity 3 years ago

Hi admin
I want config width to show on desktop, tablet and mobile. I want change width when input info in 3 box ( view image) to show. example: icon desktop : @media min-width is 1200px; icon tablet: @media min-width is 1024px; icon smart phone: @media min-width is 300px; Please view link image to know

7 replies

Pavel

3 years ago · edited

Нi. SPPB is built on Bootstrap. Therefore, it is not possible to change the values of the breakpoints. They have values from Bootstrap

/*Breackpoints*/
/* Desktop First */
@media (max-width: 575.98px) {}
@media (max-width: 767.98px) {}
@media (max-width: 991.98px) {}
@media (max-width: 1199.98px) {}
@media (max-width: 1399.98px) {}
/* Mobile First */
@media (min-width: 576px) {}
@media (min-width: 768px) {}
@media (min-width: 992px) {}
@media (min-width: 1200px) {}
@media (min-width: 1400px) {}

https://getbootstrap.com/docs/5.1/layout/breakpoints/

TRAN HUU QUOC VAN Asked this

3 years ago

Hi Pavel
I know SPPB is build on Bootstrap. But when i use Image Carousel addon and change sm to md in code and add info heigh, it not change on frontend. Example in image: When show website in width 1200px or 1024px. I want change data-height-sm="400", but it still in data-height="470px"

Pavel

3 years ago

I cannot see your image because I am not an employee of Joomshaper.
I can only give advice. If any settings do not work, you can configure this through CSS code.

Mehtaz Afsana Borsha Staff

3 years ago

Thanks for contacting us. Please clear your Joomla and Browser cache then check again. If still the settings does not work then you can fix it by using custom CSS. This blog may help you.

https://www.joomshaper.com/blog/which-line-of-css-i-have-to-edit-code-inspector-in-action

-Regards.

TRAN HUU QUOC VAN Asked this

3 years ago

Hi Pavel. My links image under. Please help me. I just need to config width for sm, md, xs.... Thank you

https://photos.app.goo.gl/D3o5jEv7GFoXikno7
https://photos.app.goo.gl/ykV8ftvr3eSdFbeX6
https://photos.app.goo.gl/tbm7CVjFwrGC5b7g9
https://photos.app.goo.gl/TQ6wTDn18UBQ6fFf8

TRAN HUU QUOC VAN Asked this

3 years ago

Hi Mehtaz Afsana Borsha
I did clear Joomla cache. But it still the same

Pavel

3 years ago

Hi.

Add your own class name in addon settings.

Set height value in each breakpoint as you need

@media (max-width: 1399.98px) {
    .YOUR_CLASS .sppb-carousel-extended-outer-stage {
        height: 400px !important;
    }
}
@media (max-width: 1199.98px) {
    .YOUR_CLASS .sppb-carousel-extended-outer-stage {
        height: 400px !important;
    }
}
@media (max-width: 991.98px) {
    .YOUR_CLASS .sppb-carousel-extended-outer-stage {
        height: 400px !important;
    }
}
@media (max-width: 767.98px) {
    .YOUR_CLASS .sppb-carousel-extended-outer-stage {
        height: 400px !important;
    }
}
@media (max-width: 575.98px) {
    .YOUR_CLASS .sppb-carousel-extended-outer-stage {
        height: 400px !important;
    }
}