Remove additional space from wins-card-mobile.svg within WIns About page (mobile only)

[abuna1985]

Overview

Remove the additional 31px of additional space from the /assets/images/about/wins-card-mobile.svg. We are currently using this <svg> within pages/about/about-card-accomplishments.html.

Current About Page (mobile view)

About Page (mobile view) figma design

Current wins-card-mobile.svg

Action Items

• Research removing additional space from a <svg>.
• update the /assets/images/about/wins-card-mobile.svg to remove the 31px of additonal space
• verify the svg matches the figma design

Resources/Instructions

• /assets/images/about/wins-card-mobile.svg
• My previous research from pull request 1870
• SVG tutorial - review so you know what is going on in the svg
• MDN - svg viewBox attribute
• CSS Tricks - Using SVG
• remove padding from svg
• findings on comment down below

[anonymousanemone]

Here are my findings laid out. Please read! (And please help)

[jbubar]

@anonymousanemone this was so entertaining to read! you might be the next xkcd.

Ok this is super janky but... going off your negative padding idea...
you can do something like

.wins-card-mobile img{
    margin-left: -20px;
    width: calc(100% + 10px);
}

But I think it is mostly because you just need a new img.. that img has a lot of extra space around the card. maybe get an svg of the wins card without the box shadow and add the box shadow on using css?

Its up to you.. but thanks for giving us an opportunity to give our 2 cents

[Aveline-art]

Fully agree with @jbubar. That image was great.

Jumping off of the new image idea, I have looked into the history of that page . (Fun fact: I had to recreate the original folder in my own version of the directory to see the history since the original about-us folder was renamed to about). It seems that the original image was there since creation, and the creator of the page had a preference for SVGs. If you decide to recreate the image here is a list of tools for creating SVGs. Or you can lift the Figma design and use a png file.

In any case, good job for sticking at this for so long.

Edit: Went on a bit of a rabbit-hole, and found this StackOverFlow that might help?

[github-actions]

@anonymousanemone Please add update

1. Progress
2. Blockers
3. Availability
4. ETA

[anonymousanemone]

Progress: Submitted pull request, but received request for changes
Blockers: Unable to work on issue recently, needs help with how to build a tablet css class.
Availability: Unable to work on issue this entire week
ETA: Around the end of next next week