Addon Image Layout, Image Too High - Question | JoomShaper
Black Friday sale is live with flat 50% OFF. Sale ends soon! Grab your deal now!

Addon Image Layout, Image Too High

H

HDcms

SP Page Builder 3 years ago

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

0
14 Answers
Rashida Rahman
Rashida Rahman
Accepted Answer
Support Agent 3 years ago #64640

Hi there!

Would you please give me your site URL here to check?

Best Regards

0
H
HDcms
Accepted Answer
3 years ago #64643

Hi Thank you for your availability. I give the hidden urls because on site in development regards

0
Rashida Rahman
Rashida Rahman
Accepted Answer
Support Agent 3 years ago #64660

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

0
H
HDcms
Accepted Answer
3 years ago #64682

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

0
H
HDcms
Accepted Answer
3 years ago #64832

Hou hou the team! you forgot me!? Is there a setting in SPPB that allows me to adjust the height of these images?

0
H
HDcms
Accepted Answer
3 years ago #65156

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!

0
H
HDcms
Accepted Answer
3 years ago #65427

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

0
Rashida Rahman
Rashida Rahman
Accepted Answer
Support Agent 3 years ago #65715

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

0
H
HDcms
Accepted Answer
3 years ago #65734

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

0
Rashida Rahman
Rashida Rahman
Accepted Answer
Support Agent 3 years ago #65766

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

0
H
HDcms
Accepted Answer
3 years ago #65767

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

0
H
HDcms
Accepted Answer
3 years ago #65876

Hello I test without success to improve the presentation as shown in the images!

0
H
HDcms
Accepted Answer
3 years ago #65997

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

0
Rashida Rahman
Rashida Rahman
Accepted Answer
Support Agent 3 years ago #66013

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

0