Awaiting an answer SP Page Builder

Page Builder Image Content Addon Bug on Tablet

Asked by MW Dev 5 years ago Last activity 5 years ago

Hello,

The Image+Content addon is not properly responding on tablets. The column breakpoints at the 768px width are having issues. On an ipad mini (768px) the image portion expands to 100% width while the content holder column remains at 50% width.

This issue is present on our dev site AND we have confirmed on the Folium template.

Can you please provide override CSS to correct this issue until a long-term fix can be included in a future update.

It seems the media queries need adjusted and in some Firebug testing we were able to isolate the the column but when changing to 100% width the content holder was not wrapping below the image.

Please take a look ASAP as we need a fix to deliver a project.

Note: Screen shots are included in Hidden Content area.

5 replies

Ariba Staff

5 years ago

Hello

Thank you for providing the screenshots. I will look into it and get back to you.

MW Dev Asked this

5 years ago

Hello Ariba

How are we doing on a solution? Looking for a fix here asap. Thanks

Ariba Staff

5 years ago

Hello

I have already shared the problem with our Developer team, as soon as we get a response I will get back to you at earliest convenience. Kindly allow me some time, thank you for your patience.

MW Dev Asked this

5 years ago

Ariba,

Appreciant the response. Meanwhile, we cannot wait any longer to delay our project and have coded an override and temporary fix you can share with your dev team below. We'd still like the addon to be corrected with a long term solution that is included in a PageBuilder release update. This is what we paid for - working software / extensions that include support on tablets.

Thanks

@media (min-width:767.98px) and (max-width:768px) {
.image-content-fix .sppb-col-sm-6, .image-content-fix .sppb-col-sm-offset-6 {
-ms-flex: 0 0 100% !important;
flex: 0 0 100% !important;
max-width: 100% !important;
}
.image-content-fix .sppb-content-holder {
padding-top: 20px!important;
padding-right: 0;
padding-bottom: 20px !important;
padding-left: 0 !important;
}
}

Ariba Staff

5 years ago

Hello

You are most welcome.

@media (min-width: 768px) {
  .sppb-addon-image-content {
    .sppb-image-holder {
      position: absolute;
      width: 50% !important;
      height: 100%;
    }
  }
}

I have attached the code given by our Developer team that will solve the problem, also i am glad you figured it out as well. Thank you for your patience and cooperation.