Feature Box Image Width Not Working For Mobile - Question | JoomShaper
SP Page Builder 6 is Here! Learn More →

Feature Box Image Width Not Working For Mobile

Chris

Chris

SP Page Builder 5 months ago

Using SPPB Pro 5.5.7 on Joomla 5.3: The Feature Box image width setting is not applied for mobile.

If I fix the image width via CSS, it works - also, the image with text to the left seems to not work for mobile either, even when I did fix the image width.

I have tried this with WebP and SVG images, the same thing happens.

Is this a bug or something I've missed?

0
40 Answers
Mehtaz Afsana Borsha
Mehtaz Afsana Borsha
Accepted Answer
Support Agent 5 months ago #192483

Hi

Thanks for contacting us and sorry for your issue. Are you talking about image icon OR background image?

https://prnt.sc/Se86lAM9_u71

Could you please give me a screenshot of your issue?

-Regards.

0
Chris
Chris
Accepted Answer
5 months ago #192505

It's an image icon:

https://1drv.ms/i/c/35f80246fe86d543/EWQvmEmuqK5Bt6Y8eE0yRDEBPoXzn_wnoKouzdgiuSTn3g?e=CxtYnX

I have put a link to the website in the Hidden Content, the feature boxes are used beneath this header:

You can expect activities and experiences that are constantly evolving, including:

0
Mehtaz Afsana Borsha
Mehtaz Afsana Borsha
Accepted Answer
Support Agent 5 months ago #192638

Hi

Could you please keep a full site backup and give me your super admin access? So that I can check.

0
Mehtaz Afsana Borsha
Mehtaz Afsana Borsha
Accepted Answer
Support Agent 5 months ago #192639

Hi

Could you please keep a full site backup and give me your super admin access? So that I can check.

0
Chris
Chris
Accepted Answer
5 months ago #192644

Added to hidden content :)

0
Mehtaz Afsana Borsha
Mehtaz Afsana Borsha
Accepted Answer
Support Agent 5 months ago #192646

Hi

It seems ok in my end, Please check the screencast below.

0
Chris
Chris
Accepted Answer
5 months ago #192739

Hi Mehtaz,

The image addon is not the issue - the problem I refer to is the feature box addon image used for the list items in that section (e.g. Creative arts, Sailing, Swimming etc.).

Chris

0
Mehtaz Afsana Borsha
Mehtaz Afsana Borsha
Accepted Answer
Support Agent 5 months ago #192779

Hi

I will inform our team about it, in the meantime you can solve it via custom CSS. Sorry for this inconvenience.

0
Chris
Chris
Accepted Answer
5 months ago #192851

Thank you :)

Chris

0
Mehtaz Afsana Borsha
Mehtaz Afsana Borsha
Accepted Answer
Support Agent 5 months ago #192912

You are always welcome.

0
Chris
Chris
Accepted Answer
4 months ago #194256

Do you know if this has been addressed in the recent PB 5.6 update?

Chris

0
Mehtaz Afsana Borsha
Mehtaz Afsana Borsha
Accepted Answer
Support Agent 4 months ago #194290

No, as per my knowledge its not added yet, but you can also check it from your end.

0
Chris
Chris
Accepted Answer
4 months ago #194297

Thanks, it looks like it isn't fixed yet.

0
Mehtaz Afsana Borsha
Mehtaz Afsana Borsha
Accepted Answer
Support Agent 4 months ago #194409

Hi,

Sorry for this inconvenience. I will inform our DEV team about it so that they can fix it ASAP.

0
Chris
Chris
Accepted Answer
4 months ago #194422

Thank you :)

Chris

0
Mehtaz Afsana Borsha
Mehtaz Afsana Borsha
Accepted Answer
Support Agent 4 months ago #194435

You are welcome.

0
Mehtaz Afsana Borsha
Mehtaz Afsana Borsha
Accepted Answer
Support Agent 4 months ago #194514

Hi Chris,

Did you use any override add-ons? Our feature box add-on does not by default, offer the width settings you need.

https://imgur.com/a/mriU4r2

0
Chris
Chris
Accepted Answer
4 months ago #194529

Set the Media Position to 'Left' or 'Right'.

Then the image width setting shows up.

It does not show up otherwise.

Chris

0
Mehtaz Afsana Borsha
Mehtaz Afsana Borsha
Accepted Answer
Support Agent 4 months ago #194537

Hi

Could you please keep a full site backup and try the latest version of page builder? It seems ok in my end. Please see the screencast video from the hidden conten.

0
Chris
Chris
Accepted Answer
4 months ago #194554

I am on the latest version of PageBuilder Pro, Joomla 5, and Helix Ultimate 2 - PHP is v8.3.

For me, the front end editor does not load the content for this website, I am not sure why as I use it on other we

Can anyone check this for me if I provide the site login in the hidden content? I can see you are changing it in the editor, does the size save and show OK when you view in a mobile browser normally and not in the editor?

I have tested this on other websites and find the exact same issue.

Chris

0
Mehtaz Afsana Borsha
Mehtaz Afsana Borsha
Accepted Answer
Support Agent 4 months ago #194708

Hi

I have created a test page in your site and then doing the same process and it seems fine in my end. Please check the screencast from the hidden content.

0
Chris
Chris
Accepted Answer
4 months ago #194727

That still isn't right though - the feature box image width goes big again on your video, and also goes on top of the layout.

I don't want it to go to the top of the layout, I want it to stay on the left, and stay at the size I set.

0
Mehtaz Afsana Borsha
Mehtaz Afsana Borsha
Accepted Answer
Support Agent 4 months ago #194732

You can adjust the settings and design as you prefer.

0
Chris
Chris
Accepted Answer
4 months ago #194814

But I can't - the feature box image on mobile does not correctly apply the width I set.

Even in your video, the feature box image for mobile does not accept the width setting you give it, regardless of the position it takes.

I think maybe you are not understanding the problem.

0
Mehtaz Afsana Borsha
Mehtaz Afsana Borsha
Accepted Answer
Support Agent 4 months ago #194848

Could you please specify the page name and the width you want to set? This way, I can try it out and check.

0
Chris
Chris
Accepted Answer
4 months ago #194865

Hi,

The Home page is one example, we have the same layout also on the Services page.

I have tried to set the image width the same as desktop, but it doesn't work.

Chris

0
Mehtaz Afsana Borsha
Mehtaz Afsana Borsha
Accepted Answer
Support Agent 4 months ago #194874

Are you talking about this portion? By the way, if you want then I can also solve it via custom CSS.

0
Chris
Chris
Accepted Answer
4 months ago #194934

Hi, this image isn't loading for me, it just has a placeholder?

Chris

0
Mehtaz Afsana Borsha
Mehtaz Afsana Borsha
Accepted Answer
Support Agent 4 months ago #194997

Now check please.

0
Chris
Chris
Accepted Answer
4 months ago #195174

Yes, those are the ones I am having the issue with.

Chris

0
Mehtaz Afsana Borsha
Mehtaz Afsana Borsha
Accepted Answer
Support Agent 4 months ago #195252

You can set the mobile width from here.

0
Chris
Chris
Accepted Answer
4 months ago #195260

Yes, I know that - I have it set to 10, the same size every other device size is set to in the same location.

However, as my original post states, this size is being ignored and not applied when you visit the site on mobile or shrink your desktop browser width down.

So, the issue I mention in my original post here is still exactly the same.

0
Mehtaz Afsana Borsha
Mehtaz Afsana Borsha
Accepted Answer
Support Agent 4 months ago #195301

Do you want the same width across all devices? I apologize; this post is quite lengthy. Could you please clarify it again?

0
Chris
Chris
Accepted Answer
4 months ago #195337

I want the size I have set for the feature box image to be 10 on mobile - which is what I have it set to in PageBuilder - however, this size is not being applied on mobile, it goes massive.

Desktop works fine, it correctly accepts the 10 size.

Mobile does not.

0
Paul Frankowski
Paul Frankowski
Accepted Answer
Senior Staff 4 months ago #195340

Hi Chris,

Indeed, at least now, small Custom CSS may be needed.

0
Paul Frankowski
Paul Frankowski
Accepted Answer
Senior Staff 4 months ago #195342
@media screen and (max-width: 680px) {
.sppb-addon-content-align-before.sppb-addon.sppb-addon-feature .sppb-img-container {
  max-width: 48px; display: inline-block !important;
  margin-right: 15px; margin-bottom: 15px;}
.sppb-addon-content-align-before.sppb-addon.sppb-addon-feature .sppb-media-content {
  display: inline-block;}
}

Use it only on that page in Page Settings > Page CSS.

As you see CSS code is very simple, so you should know what is doing. Only class name may looks scary.

info_2910_2025.gif

0
Chris
Chris
Accepted Answer
4 months ago #195412

Thanks Paul, as much as I know I can use CSS, the item appears on several pages in the same style - plus, as I use this feature box on many websites (given we have over 250 to support), I wanted to make sure this was notified to the team as a bug - CSS is a workaround, but not a fix - which will hopefully be applied to a future PageBuilder update.

0
Paul Frankowski
Paul Frankowski
Accepted Answer
Senior Staff 4 months ago #195413

You can use the same CSS in Template Global Custom CSS styles. It was quick DuckTape solution.

We are waiting for developers return. But SPPB update won't be this week :/

0
Chris
Chris
Accepted Answer
4 months ago #195443

Thanks, I can use the CSS at the moment and await the fix for the future :)

0
Chris
Chris
Accepted Answer
1 month ago #203205

It seems this is still a bug? Is it on the roadmap to be fixed?

We can set the Feature Box icon/image width in the addon settings, but it is not applied for mobile etc., just desktop.

0