Good morning,
I don't understand why in the JCE editor the images are centered and horizontal and why in a module or on the site with SPP the images are vertical on the right. The code :
<div style="text-align: center;"><img src="/https://voxmundus.com/images/logo/logo-facebook-rond-30.png" alt="Vox Mundus Facebook" width="30" height="30" style="margin: 3px; border: 0px solid #000000;" title="Vox Mundus Facebook" /><img src="/https://voxmundus.com/images/logo/logo-gmb-rond-30.png" alt="Vox Mundus GMB" width="30" height="30" style="margin: 3px; border: 0px solid #000000;" title="Vox Mundus GMB" /><img src="/https://voxmundus.com/images/logo/logo-instagram-30.png" alt="Vox Mundus Instagram" width="30" height="30" style="margin: 3px; border: 0px solid #000000;" title="Vox Mundus Instagram" /><img src="/https://voxmundus.com/images/logo/logo-linkedin-rond-flat-30.png" alt="Vox Mundus Linkedin" width="30" height="30" style="margin: 3px; border: 0px solid #000000;" title="Vox Mundus Linkedin" /><img src="/https://voxmundus.com/images/logo/logo-youtube-round-flat-30-30.png" alt="Vox Mundus YouTube" width="30" height="30" style="border: 0px solid #000000; margin: 3px;" title="Vox Mundus YouTube" /><img src="/https://voxmundus.com/images/logo/logo-telegram-30.png" alt="Logo Telegram" width="30" height="30" style="border: 0px solid #000000; margin: 3px;" title="Logo Telegram" /><img src="/https://voxmundus.com/images/logo/logo-tiktok-flat-30.png" alt="Logo Tiktok" width="30" height="30" style="border: 0px solid #000000; margin: 3px;" title="Logo Tiktok" /></div>
Align images in a div with SP Page Builder
Accepted answer
Marked as the solution
Please use this CSS to Template Options -> Custom Code -> Custom CSS
.social-image {
display: flex;
justify-content: center;
}19 more replies
Hello Stéphane Bernard, BAB Location Véhicules
By default, there are some settings. You can align the images or change the setting with Custom CSS.
Best regards
Thanks for your reply, but it doesn't work !
Can you help me ?
Apology for the delayed response. Please share a screenshot of your issue to understand it better. Take a screenshot and share via any platform. For example: Lightshot or Imgur. Also, share the page link to check.
Hi thanks for ypur reply.
In front-end, at the bottom of the page : https://voxmundus.com/
https://nimb.ws/hlwRGu
In Backoffice : https://nimb.ws/4NLRMO
and you have my private admin access...
Best regards...
Please use this CSS to Template Options -> Custom Code -> Custom CSS
.social-image {
display: flex;
}Ok and to center with display: flex ?
Top !
Thanks.
best regards
You are welcome 😊
I have a humble request. It would be very kind of you if you can manage some moment to give us feedback on
This will inspire us to improve.
Hi team,
I've the same issue with another website !
Please use this CSS to
Template Options -> Custom Code -> Custom CSS
.social-image p{
display: flex;
}Fine ! Happy new Year !
Happy New Year 2025 to you and your family 🎉
Hi,
can you explain to me why the images are deformed ?
https://www.ag.amdfrance.org/index.php
Best regards
It looks like template.css is affecting the image to shrink. You can use this CSS on
Template Options -> Custom Code -> Custom CSS to get rid of the issue.
.sppb-addon.sppb-addon-text-block img {
height: 100%;
}Or, if you want, then I can check the issue from the backend and suggest a better solution. In this case, I will need the administrator access of the site. Share your administrator access here to check the issue. Use the Hidden Content box to share the credentials. Make sure that you have a full site backup before sharing.
Hi, Yes for a better solution please... In hidden content.
Thanks in advance..
Sorry, the credentials you provided do not match. Please check and share it again.
Sorry ! Again....
Sorry, it has no other options. I have added the CSS to css/custom.css file.
.sppb-addon-text-block .sppb-addon-content div img {
height: 100% !important;
}Please clear your cache and check the site.
OK it's logical, but it's don't work...
https://www.ag.amdfrance.org/
I have added it on the source code of the Text Block Addon. Now it shows fine.
https://prnt.sc/GzHF6HnQtAKi
So I put in Custom Css Box Row and it's fine ! :
.sppb-addon-text-block .sppb-addon-content div img {
height: 100% !important;
Thanks a lot !You are welcome 😊
Let me know if you need further help.