Solved SP Page Builder

Image Add-On : Width 100%

Asked by Stephane Hanrez 3 years ago Last activity 2 years ago

Hi,

How do I set an image width to 100% ? I see I can add a width and height in the general tab, but it looks like it can only be set in px, not %

I tried to add width:100%; in the custom css box under the style tab, but it didn't seem to have any effect.

Thanks

Accepted answer

Marked as the solution

Pavel

2 years ago · edited

You can see the second image has a width of 316 while the container seems to have a width of 505 :

This is not related to the size of the image. It is for avoid content jumping when loading the page.

Add this code to the addon's CSS field.

.sppb-addon-single-image-container {
    width: 100%;
}
.sppb-img-responsive {
    width: 100%;
}

But as I said, the images will lose quality. Better select the images in accordance with the size. Then you do not need a code.

Stephane Hanrez Asked this

2 years ago

Thanks a lot, this worked.

Yes I'm aware that the image quality won't be good, I'll replace those images with better quality ones once the definitive site goes online, but at least this allows me to get a better view of the end outcome.

6 more replies

Rashida Rahman Staff

3 years ago

Hi there!

Thanks for contacting us.

You can do it with custom CSS. Do you want this for all images? or for a single specific image addon? Kindly do let me know and share your specific site URL with redirection to where you want this.

Best Regards

Stephane Hanrez Asked this

3 years ago

Hi,

I would like it for a few images add-on (not all images of the site). I tried adding a custom CSS in the image add-on section but with no success. Also tried creating a class in my template and assigning it to the image add-on but that also didn't work.

Adding an example of a page where I would want it in hidden content.

Thanks
Stéphane

Stephane Hanrez Asked this

2 years ago

Still no news about this css ? I don't get why adding width:100; in the custom CSS for the image doesn't work.

Stephane Hanrez Asked this

2 years ago

Any news ? I really need to be able to set some of my images to 100% width... Your first message is telling me I can do that using CSS, could you please tell me how ?

Thanks

Stephane Hanrez Asked this

2 years ago

Any news ??

Pavel

2 years ago · edited

Hi Stephane.

All images have 100% max-width and auto height by default . If you add a 100% width to the image and it will be more than the real image width, then it will lose quality.

Therefore, it is not entirely clear what you want to achieve. I am not an employee of support, but I could help you so that you do not spend time waiting if you provide public links to examples.

Stephane Hanrez Asked this

2 years ago

Hi Pavel,

Thanks for your help.

Here is an exemple: https://vincenza.hanrez.be/index.php/coaching

There are 2 images at the top of this page, I simply would like those 2 images to use 100% of the container... They don't seem to be 100% by default, they just use the default image size in pixels, but I should be able to let them extend to the full container.

You can see the second image has a width of 316 while the container seems to have a width of 505 :

<img class="sppb-img-responsive" src="/images/2023/11/02/chat_coaching_2.png" alt="Image" title="" width="316" height="222">

Thanks
Stéphane