Hello
I have a small text to put in an image layout addon. I put a height of 400px.
The rendering of the page (see image) extends the height to 970px.
Where can we change the height of the image in this addon, so that it is displayed as the real image?
https://pic.infini.fr/R32GEuu9/p7p1lQoY.png
Regards
Staff replied
SP Page Builder
Addon Image layout, image too high
14 replies
Rashida Rahman Staff
Hi there!
Would you please give me your site URL here to check?
Best Regards
HDcms Asked this
Hi
Thank you for your availability.
I give the hidden urls because on site in development
regards
Rashida Rahman Staff
Hi,
Thanks for your links.
Do you want to change the height for all of your image layout addons or these two specific images only?
Best Regards
HDcms Asked this
4 years ago
· edited
Hello
I changed the requested url a few days ago because I am currently testing with the htaccess file enabled.
I will definitely switch the site to production mode today even though I am not happy with the display of these images.
Can you answer me or do I have to open a new thread to get an answer?
Regards
HDcms Asked this
Hou hou the team!
you forgot me!?
Is there a setting in SPPB that allows me to adjust the height of these images?
HDcms Asked this
Hello
Well it's the end of the week, I would have appreciated an answer because I don't see any solution. I did not even find how to simply do it by css?
I also think that it should be in the settings of this addon as it exists in other image addon!
HDcms Asked this
Hello
I changed the requested url a few days ago because I am currently testing with the htaccess file enabled.
I will definitely switch the site to production mode today even though I am not happy with the display of these images.
Can you answer me or do I have to open a new thread to get an answer?
Regards
Rashida Rahman Staff
Hi there!
Please take my sincere apology for the unwanted delay.
Kindly use the following code in your custom CSS:
.sppb-addon-image-layout-image.image-fit, .sppb-img-responsive.image-fit {
height: 400px;
}Hope this will serve your purpose for now.
Best Regards
HDcms Asked this
Hi
Thank you, but this did not solve my problem completely, because your code
1/ is used on the 2 pages for the 1st image of the addon layout /maintenance-site and /audit-web-services-internet (deformation of this 1st image of the addon layout)
2/ no improvement for the 2nd page /maintenance-site on the 3 left images
I attach images hoping that it helps
https://pic.infini.fr/gallery#mriXgqwa/O1MBRJ2e.png,eh4jdB2r/0DGX4Lvj.png
/maintenance-site
- 280 px maximum height of the images
- image (without distortion) close to the text, to have the same layout addon
The ideal would be to be able to make the adjustment with cursor in the addon (suggestion) like other image addons
Regards
Rashida Rahman Staff
Hello,
I'm afraid, I could not understand you fully.
Where did you used that custom css, please? If you used this into your custom.css file then it will apply for all the images to set the fixed height as 400px. I have checked and they are appearing as 400 px height. https://prnt.sc/2oiZdaoLs6yO
And I could not visit your first link, it gives me 404 error, I can access your second link and gave you the code accordingly.
You have all the images overlapped with text content as expected, but you can not see because some of your images has transparent background and some has colored background. Maybe the following screenshot make sense: https://prnt.sc/PpFM9qAZSLt3
However, if you want to style certain addons with different helight/width, then you can have a look into the following conversation:
https://archive.joomshaper.com/forums/how-do-i-modify-image-size-in-image-layout-addons
It may help!
Note: I think well prepared high resolution images may solve the problem. But as you can understand you can define image size(height/width) under the same selector as I have share the code with you earlier. Do you want the max-width property to define also? Then you can, yes with this same.
Best Regards
HDcms Asked this
HI again
Yes as you can see I use my .css file to centralize my modifications, because I'm a little bit lost between the css of helix , the custom template or in the addons.
Then as it's css, I need a more precise code and the 2020 article doesn't help me because it mentions css code in the addon for several types of screens. For now I was doing the simplest on a desktop screen.
The general idea
/maintenance-site: 280 px maximum height of the images + bringing the image closer to the text (without distorting the image). As we have a little trouble to understand each other (and my bad English), can you rely on the screens that clearly show what I expect (and indeed taking into account that other pages can use .sppb-addon-image-layout-image.image-fit, .sppb-img-responsive.image-fit ).
For the url in error (it is logical, because I try to move forward during this time) and from tomorrow I remove the term v2.xx
REgards
HDcms Asked this
Hello
I test without success to improve the presentation as shown in the images!
HDcms Asked this
Hello
I managed to move forward by finding an id above that allow me to better target an image.
I consider the fine tuning of addon layout images a bit complicated. I hope you can improve this in SPPB 4.x?
In the meantime, I would appreciate if you or another support person could help me (if possible) to bring the image closer to the text "Des audits ou prestations forfaitaires"
https://atoutweb.com/audit-web-prestations-de-services-internet
Rashida Rahman Staff
Hi,
Glad to know that you have found it:)
However, will this distance be okay for you? https://prnt.sc/9PXD9KJjzpzq
If yes, then here is the extra code:
#sppb-addon-1649087280014 .sppb-img-responsive.image-fit {
margin: 0 auto;
}Note: Path towards custom CSS(Joomla 3): Extensions>Templates>Styles> Click on your current default template name then choose Template Options. Then find custom CSS within the custom code.
Best Regards
Log in to reply.