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
You are always welcome. You can now close this post by accepting the answer.
Hi
Thanks for contacting us. Could you please give me your site URL and also screenshot of your issue?
-Regards.
.
Could you please give me a screenshot of your issue?
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.
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.
Are you talking about this image?
See its working on my end after applying my CSS
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.
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
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;
}
}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.
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:
Thank you - now is correct -
Thanks for your help
Greetings