Bug: no padding between icon and text

[dev-phantom]

Describe the bug

There is no padding between the icon and text on mobile view

Steps to reproduce

1. Go to https://intro.opensauced.pizza/#/01-intro
2. See error

Browsers

No response

Additional context (Is this in dev or production?)

No response

Code of Conduct

• [X] I agree to follow this project's Code of Conduct

Contributing Docs

• [X] I agree to follow this project's Contribution Docs

[Suldana]

@dev-phantom I'm interested in solving this issue please assign to me

[dev-phantom]

@dev-phantom I'm interested in solving this issue please assign to me

Nice😊

You can use the .take to self assign your self to the issue

[Suldana]

@dev-phantom I'm interested in solving this issue please assign to me

Nice😊

You can use the .take to self assign your self to the issue

Thanks for your reply

[Muniir1]

.take

[luqman-salad]

.take

[Suldana]

.take

[dev-phantom]

@OgDev-01 please can you assign @Suldana to this

[Muniir1]

@OgDev-01 Please assign me i have fixed the issue

[Suldana]

dear @OgDev-01 please assign this issue to @Muniir1 he worked hard to solve this issue, please assign to him, thanks

[dev-phantom]

I'm confused here sorry I thought @Suldana had already fix this issue?

[Ganesh1521]

Here is Code to fix this problem

.content { display: flex; align-items: center; padding: 20px; }

.text { flex: 1; padding-right: 20px; }

.diagram { flex: 1; text-align: center; }

.diagram img { max-width: 100%; }

[CBID2]

Here is Code to fix this problem

.content { display: flex; align-items: center; padding: 20px; }

.text { flex: 1; padding-right: 20px; }

.diagram { flex: 1; text-align: center; }

.diagram img { max-width: 100%; }

Thanks @Ganesh1521, but PR #27, solves this.