Image Add-On : Width 100% - Question | JoomShaper
Black Friday sale is live with flat 50% OFF. Sale ends soon! Grab your deal now!
Back to the questions

Image Add-On : Width 100%

Stephane Hanrez

Stephane Hanrez

SP Page Builder 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

0
9 Answers
Order by
Oldest Newest Votes
Pavel
Pavel
Accepted Answer
2 years ago #137501

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.

0
Stephane Hanrez
Stephane Hanrez
Accepted Answer
2 years ago #137503

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.

0
Rashida Rahman
Rashida Rahman
Accepted Answer
Support Agent 2 years ago #136482

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

0
Stephane Hanrez
Stephane Hanrez
Accepted Answer
2 years ago #136484

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

0
Stephane Hanrez
Stephane Hanrez
Accepted Answer
2 years ago #136887

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

0
Stephane Hanrez
Stephane Hanrez
Accepted Answer
2 years ago #137249

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

0
Stephane Hanrez
Stephane Hanrez
Accepted Answer
2 years ago #137487

Any news ??

0
Pavel
Pavel
Accepted Answer
2 years ago #137492

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.

0
Stephane Hanrez
Stephane Hanrez
Accepted Answer
2 years ago #137494

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

0