Home App Docs Blog Github

Set Image width: 100%, not the Picture tag

I have been trying to make an image 100% width. The content builder UI sets the < picture > tag at width:100% and not the < img > tag. As a result there is an overflow. Is it possible to set < img > to 100%?

Left image is how the editor looks.
Right image is how I would like it to look (I edited through Chrome debugger)

Hi @bull1099! Thanks for reaching out.

Can you send a link to the page this is occurring on? I’d be happy to take a look :grin:

Here is a content builder link https://builder.io/content/ab07900056a640809af4e4eef4ceef7c

Here is a viewable public link https://wepixeled.now.sh/user/imhsy1h3-z89z86yp-raxuxtse-5cc6rpg0/listing/80aldev1-m4ep0dhq-v4x4di0p-kpfveahh/share

Thank you!

If you add an aspect ratio to the image (e.g. 0.5, you can do this in the options tab in advanced settings) it will resolve this issue :grin:

Let us know if you have any other questions!

Is there another solution? Not all of the images will have the same aspect ratio.

Another solution is adding custom CSS (e.g..some-custom-class img { width: 100% }). You can add a custom class by navigating to the styles tab and scrolling down to the advanced section. Then you can add custom CSS in the “CSS/JS” section at the bottom of the data tab :grin:

Screen Shot 2020-06-01 at 5.09.13 PM

Let me know if this works!

Awesome. The builder itself is so easy, I forget there is a custom CSS option. That will work, many thanks @maddy

1 Like