Align Images In A Div With SP Page Builder
Stéphane Bernard, BAB Location Véhicules
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>
Ofi Khan
Accepted AnswerPlease use this CSS to Template Options -> Custom Code -> Custom CSS
.social-image {
display: flex;
justify-content: center;
}Ofi Khan
Accepted AnswerHello 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
Stéphane Bernard, BAB Location Véhicules
Accepted AnswerThanks for your reply, but it doesn't work ! Can you help me ?
Ofi Khan
Accepted Answer Stéphane Bernard, BAB Location Véhicules
Accepted AnswerHi 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...
Ofi Khan
Accepted AnswerPlease use this CSS to Template Options -> Custom Code -> Custom CSS
.social-image {
display: flex;
}Ofi Khan
Accepted AnswerYou 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.
Stéphane Bernard, BAB Location Véhicules
Accepted AnswerHi team, I've the same issue with another website !
Stéphane Bernard, BAB Location Véhicules
Accepted AnswerHi, can you explain to me why the images are deformed ? https://www.ag.amdfrance.org/index.php Best regards
Ofi Khan
Accepted AnswerIt 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.
Stéphane Bernard, BAB Location Véhicules
Accepted AnswerHi, Yes for a better solution please... In hidden content. Thanks in advance..
Ofi Khan
Accepted AnswerSorry, the credentials you provided do not match. Please check and share it again.
Ofi Khan
Accepted AnswerSorry, 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.
Stéphane Bernard, BAB Location Véhicules
Accepted AnswerOK it's logical, but it's don't work... https://www.ag.amdfrance.org/
Ofi Khan
Accepted AnswerI have added it on the source code of the Text Block Addon. Now it shows fine.
Stéphane Bernard, BAB Location Véhicules
Accepted AnswerSo 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 !