@correlucas
Posted
👾Hello @rakshithjodukallu, Congratulations on completing this challenge!
Amazing solution! I liked a lots the gradient text colors. Maybe I'll get inspiration to add this to my solution too
Something you can do to improve it is keep the text content attached with the image instead of separated, otherwise it will not seem like a component.
1.The easiest way to build this component and make sure that each column will have 50% of the container size is by using GRID
. All you need to do is to use display: grid
to activate the Grid and then make the two columns with grid-template-column: 1fr 1fr
and its done, now you’ve two columns. For the MOBILE VERSION
you can switch to flex
creating a media query using display: flex
and flex-direction: column-reverse
to make the image appear before the text content.
2.To make the image have a better fit inside of it, make the component image responsive with display: block
and max-width: 100%
(this makes the image fit the column/div size) and respect the component size while it scales down. To make it crop while scaling use object-fit: cover
.
img {
display: block;
object-fit: cover;
max-width: 100%;
}
✌️ I hope this helps you and happy coding!
Marked as helpful
@rakshithjodukallu
Posted
@correlucas Updated the code like you said. Thanks brother.
@correlucas
Posted
@rakshithjodukallu This is nice! Keep posting amazing challenges!