Hi, @NarendraKoya999.
That's a good solution. Keep coding.
Here are some important tips.
1 - You should have at least one main element in your page. So you can markup your HTML in this style:
<body>
<main>
<div class="card"></div>
</main>
</body>
And you can give more meaningful names to your card items, such as:
<div class="card">
<div class="image-area"></div>
<div class="content-area"></div>
</div>
left-content and right-content don't make sense because they'll change their position depending on the screen size of the device.
2 - You don't need to give your container element a height and width value. This breaks the natural behavior of responsive HTML. Remove all of width and height values from your elements.
You can use max-width property for your container to keep its children a maximum width like:
.card {
max-width: 1110px;
}
and
@media (max-width: 768px){
.card {
max-width: 327px;
}
}
3 - Also you don't need to change the flexbox behavior for your container. Keep their values as the default like:
align-items: strecth; and justify-content: flex-start;
If you don't declare any rules for align-items and justify-content, these properties will be used by default.
.card {
display: flex;
/* align-items: center; */
max-width: 1110px;
/* justify-content: center; */
/* height: 70%; */
padding: 40px 0;
border-radius: 10px;
}
4 - You can add a display: block declaration block to your image to remove some margin at the bottom of the image, such as:
.right-content img {
display: block;
max-width: 100%;
}
This will make your image more responsive and easier to control.
I hope these will help you. Keep coding and have a wonderful day.
