SDDS themes are causing images to be too big

See screenshots.

Debugging info

I've debugged and was able to fix it locally by updating the base.css files with:

img {
  border-style: none;
  display: block;
  max-width: 100%;
  height: auto;
} 

Now I just need to know where to put that :)

I see the current img css is set via:

https://github.com/necolas/normalize.css/blob/master/normalize.css/

img {
  border-style: none;
} 

I merged a bandaid until this can be fixed properly.

I'll look at this for you.

Thanks 🙏

As I thought, Olivero adds the code you added in the /base.css.

Since this image doesn't have style set it uses the attribute width and height as you have illustrated, and therefore it is best we add the same code in the demo design system too.

The small image, uses the thumbnail image style, that's why it is resized.

I'll check for the best file to add it to.

Thanks 🙏

p.s. In case you haven't noticed, there are some interesting build rules so it may not be easy to find where to put this. I can have one of the CivicTheme developers find a spot though if you don't see anything obvious.

That's okay, gave me a chance to look at the set-up. I added it to the reset.css in the 00-base directory, so it is at the top of the base.css.

Oh! Coolio :)

That looks like a good spot but assigning to Alan for review just in case.

kristen pol → changed the visibility of the branch 3472675-sdds-themes-are to hidden.

Alan is focused on other things. Tested locally and it is working as expected so moving forward with this. Thanks!

kristen pol → changed the visibility of the branch 3472675-sdds-themes-are to active.

Merged!

Automatically closed - issue fixed for 2 weeks with no activity.