Slideshow Image Content Not Responsive On Mobile Devices - Question | JoomShaper
Black Friday sale is live with flat 50% OFF. Sale ends soon! Grab your deal now!

Slideshow Image Content Not Responsive On Mobile Devices

S

Saam

SP Page Builder 3 years ago

I have created a SP Page Builder Slideshow in a Module with a background image of 1920x300 and then an Image Content of 940x260 but the Image Content it's not Responsive on Mobile devices. I tried different Image Width and Height for different devices but to no success.

I tried Text Content instead of Image Content and the result was not the best but some how Responsive.

Anybody had the same issue? Any work around that would be fine.

Joomla 4 Finance Template (Helix 3)

Thanks in advance.

0
22 Answers
Mehtaz Afsana Borsha
Mehtaz Afsana Borsha
Accepted Answer
Support Agent 3 years ago #75192

Hi,

Thanks for contacting us. Could you please give me your site URL and also screenshot of your issue?

-Regards.

0
S
Saam
Accepted Answer
3 years ago #75204

Thanks so much for your quick response.

0
S
Saam
Accepted Answer
3 years ago #75302

I have sent sent you the link so, any tip on what is happening and how to resolve the problem?

0
Mehtaz Afsana Borsha
Mehtaz Afsana Borsha
Accepted Answer
Support Agent 3 years ago #75312

Could you please give me a screenshot of your issue? I need to check.

0
S
Saam
Accepted Answer
3 years ago #75326

I tried to send a screenshot but it does not upload.

0
Mehtaz Afsana Borsha
Mehtaz Afsana Borsha
Accepted Answer
Support Agent 3 years ago #75425
0
S
Saam
Accepted Answer
3 years ago #75480

Thanks so much for pointing me to the right direction.

The screenshots are sent.

0
Mehtaz Afsana Borsha
Mehtaz Afsana Borsha
Accepted Answer
Support Agent 3 years ago #75560

Which page are you talking about? It does not same the site which you provide.

0
S
Saam
Accepted Answer
3 years ago #75579

I have sent you the URL and if you really check it up you would have seen the differences how it look like on a Desktop and how it look like on a Mobile Phone.

Anyway, I am sending you the links again to compare.

Thanks again in advance.

0
S
Saam
Accepted Answer
3 years ago #75580

I have sent you the URL and if you really check it up you would have seen the differences how it look like on a Desktop and how it look like on a Mobile Phone.

Anyway, I am sending you the links again to compare.

Thanks again in advance.

0
Mehtaz Afsana Borsha
Mehtaz Afsana Borsha
Accepted Answer
Support Agent 3 years ago #75855

Hi,

Use this custom CSS

.sppb-sp-slider-image{
  height:unset !important;
}

Path towards custom CSS: Extensions>Templates>Styles> Click on your current default template name then choose Template Options. Then find custom CSS within the custom code.

0
S
Saam
Accepted Answer
3 years ago #75904

Thanks so much for the help. But I can't seem to get the Path that you mention.

Do you mean: System ->Site Templates Styles ->Default Template ->Custom Code ->Custom CSS...?

If that's the Path then, I tried it but nothing changes or it had no effect on the Mobile phone and it still appeared very funny as before.

Thanks again in advance.

0
Mehtaz Afsana Borsha
Mehtaz Afsana Borsha
Accepted Answer
Support Agent 3 years ago #75993

Give me your super admin access please I need to check.

0
S
Saam
Accepted Answer
3 years ago #76017

Thanks again for your help.

The login had been sent.

0
Mehtaz Afsana Borsha
Mehtaz Afsana Borsha
Accepted Answer
Support Agent 3 years ago #76140

It seems ok now. Please check.

0
S
Saam
Accepted Answer
3 years ago #76170

Sorry it's not OK..!

Just compare the two screenshots I sent to you.

Thanks.

0
Mehtaz Afsana Borsha
Mehtaz Afsana Borsha
Accepted Answer
Support Agent 3 years ago #76193

Use this custom CSS and delete my previous code


@media (max-width: 767px){
.sp-slider #sp-slider-item-1542796407311-num-0-key #sp-slider-inner-item-1542796407312-num-0-key img{
  height:unset !important;
}

  .sp-slider #sp-slider-item-1542796407311-num-1-key #sp-slider-inner-item-1542796407313-num-0-key img{
      height:unset !important;
  }
  .sp-slider #sp-slider-item-1542796407311-num-2-key #sp-slider-inner-item-1542796407314-num-0-key img{
     height:unset !important;
  }
  .sp-slider #sp-slider-item-1542796407311-num-3-key #sp-slider-inner-item-1542796407315-num-0-key img{
        height:unset !important;
  }
.sp-slider #sp-slider-item-1542796407311-num-4-key #sp-slider-inner-item-1542796407316-num-0-key img{
      height:unset !important;
}

}
0
S
Saam
Accepted Answer
3 years ago #76204

Perfect it now works like charm.

Thanks so much for the support.

I highly appreciate your kind help.

0
Mehtaz Afsana Borsha
Mehtaz Afsana Borsha
Accepted Answer
Support Agent 3 years ago #76211

Glad to know that:) You are always welcome! You can now close this post by accepting my answer.

It would be very kind of you if you can manage some moment to give us feedback here:

https://extensions.joomla.org/extension/sp-page-builder/

https://www.trustpilot.com/review/www.joomshaper.com

Please let me know your name on the review. Thanks for being with us :)

0
S
Saam
Accepted Answer
3 years ago #76340

Thanks so much for the quick response.

Of course I shall give a review of my personal experience.

Thanks.

0
S
Saam
Accepted Answer
3 years ago #76466

Sorry, I have realized that the Background Image does not resize with the Image Content. As you can see, the Background Image covers the whole screen making the Image Content looks real too small on a Mobile phone device.

Any fix for that also?

Thanks again in advance.

0
Mehtaz Afsana Borsha
Mehtaz Afsana Borsha
Accepted Answer
Support Agent 3 years ago #76482

Thanks a lot. Could you please create a new forum post about this new topic?

-1