Images are Not Displayed In Full Width In The Phone View - Question | JoomShaper
Black Friday sale is live with flat 50% OFF. Sale ends soon! Grab your deal now!

Images are Not Displayed In Full Width In The Phone View

G

Gerhard

SP Page Builder 2 years ago

Hello,

I'm using Helix 3 and SP pagebuilder 4.0.10.

On my website images are not displayed in full width in the phone view. I increased the column width in the phone view to 100%. However, images are cut off on the right side in this view and are not displayed in landscape format, but in portrait format.

What do I have to set so that the pictures are fully displayed in the phone view?

Thanks

0
13 Answers
Mehtaz Afsana Borsha
Mehtaz Afsana Borsha
Accepted Answer
Support Agent 2 years ago #115596

You are always welcome. You can now close this post by accepting the answer.

0
Mehtaz Afsana Borsha
Mehtaz Afsana Borsha
Accepted Answer
Support Agent 2 years ago #114344

Hi

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

-Regards.

0
G
Gerhard
Accepted Answer
2 years ago #114622

.

0
Mehtaz Afsana Borsha
Mehtaz Afsana Borsha
Accepted Answer
Support Agent 2 years ago #114678

Could you please give me a screenshot of your issue?

0
G
Gerhard
Accepted Answer
2 years ago #114845
0
Mehtaz Afsana Borsha
Mehtaz Afsana Borsha
Accepted Answer
Support Agent 2 years ago #114945

Use this custom CSS

@media (max-width: 991.98px){
#sppb-addon-8igtaHoxOiPYDie6Nuo0a img {
    width: 100% !important;
    max-width: 100% !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
G
Gerhard
Accepted Answer
2 years ago #114981

I added the CSS code in the template. Unfortunately the result is not what it should be. Some of the pictures now look "squeezed" in the phone view, i.e. not proportionally reduced. For other images it has no effect at all.

0
Mehtaz Afsana Borsha
Mehtaz Afsana Borsha
Accepted Answer
Support Agent 2 years ago #115080

Are you talking about this image?

https://prnt.sc/E1WQ3MCzpfoT

See its working on my end after applying my CSS

https://prnt.sc/TGaYjSCeXHk7

You have used a custom CSS before my CSS, and on that you have fixed the width that's why the whole image does not appear.

0
G
Gerhard
Accepted Answer
2 years ago #115170

Yes, that's the picture I mean. The following CSS is built in: https://prnt.sc/dcGbnq2fnlk1. The CSS isn't mine though, because I'm not familiar with CSS programming. I copied it from one of your layouts from your website. The other images that don't have CSS remain clipped when I applying your CSS: https://prnt.sc/rbYUkivMsBq_

The correct size would be this: https://prnt.sc/zJGiLPhVXVo6

0
Mehtaz Afsana Borsha
Mehtaz Afsana Borsha
Accepted Answer
Support Agent 2 years ago #115319

Ok got it. Remove my previous CSS and Use this custom CSS

@media (max-width: 991.98px){
#sppb-addon-1669568179001 img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
}
}
0
G
Gerhard
Accepted Answer
2 years ago #115349

After I apply the new CSS something strange happens:

Phone-View: https://prnt.sc/e_csAbCmbjMm Only the image in the center with the elephant is displayed at the correct size, the others remain cropped.

Tablet-View: https://prnt.sc/TeyuF6cif7tq The elephant image here is too small, while the other images are the correct size.

0
Mehtaz Afsana Borsha
Mehtaz Afsana Borsha
Accepted Answer
Support Agent 2 years ago #115377

I am really sorry for this inconvenience. I thought you only need that elephent image. Now its working. Please delete all my previous CSS and use this one.

@media (max-width: 800px){
.sppb-addon img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
}
}

Its working, See the screenshot below:

https://prnt.sc/FX10zGz4tDqc

0
G
Gerhard
Accepted Answer
2 years ago #115511

Thank you - now is correct -

Thanks for your help

Greetings

0