All solutions

I tried this with only Flexbox with no use of media query. please suggest any improvements. thank you

Hey everyone! I hope all of you are doing great. I have finished this challenge and I really want to know your thoughts on this.

while I was working on this I faced one issue described below. Kindly explain the cause of why it's happening like this -why all 3 pseudo-elements are taking too much height even though I have declared line-height: 1 and tried all flex alignment properties but still it's taking too much space vertically? please explain the cause of why it's happening thank you

📷 click here for image please

.card__paragraph::before {
content: "\201C";
position: absolute;
left: -0.8rem;
font-size: 2rem;
line-height: 1;
font-family: sans-serif;
opacity: 0.5;
border: 2px solid red;
}

.card__paragraph::after {
position: absolute;
content: "\201D";
font-size: 2rem;
line-height: 1;
font-family: sans-serif;
opacity: 0.5;
border: 2px solid red;
}

.card-1::after {
position: absolute;
content: "\201D";
font-size: 28rem;
line-height: 1;
font-family: sans-serif;
top: -3.5rem;
right: 1rem;
opacity: 0.3;
z-index: 5;
border: 2px solid red;
}

any criticism is appreciated. ty

Any Criticism is welcomed :)

any suggestions or feedbacks are welcome :) Thank you!

Any feedback or suggestion is appreciated.

• I am facing issues with the button's vertical alignment, if the text gets long the button doesn't vertical-align automatically to the end. I tried the justify-self: end to button, but it's not working, please share your thoughts on this, and why it's now working.

• I used the auto-fit hack to automatically adjust grids with screen size, please share your thoughts on this approach.

thank you@

any feedback is appreciated. Thank you!

Any feedback is appreciated! thank you!

I faced some issues with some unnecessary white space below our image which is wrapped in a picture tag when I resize the screen size [after art direction @ media query ~600px] and when I make the screen size smaller the white space gets more significant. I fixed it by making the picture tag display: flex-inline. Please share your thoughts on this for a better way to approach it. Thank you. Waiting for your feedback.

This is my first challenge.