@SasaVatic
Posted
Hi Mostafa Mohi, Your solution is very nice. Two things that I would change as if I was one writing css. I Would not use relative position for .feature-logo. You can position it with padding or margin. I would do something like this to escape overflowing:
.feature-logo {
margin-left: auto; ---> add
display: block; ---> add
/* position: relative; */ ---> delete
/* top: 20%; */ ---> delete
/* left: 75%; */ ---> delete
}
And for div I will exclude fixed height. In this case it is not mandatory. But what if in the future you add some extra text. Text and .feature-logo will overflow their div parent if their content height is larger then parent height.
div {
width: 100%;
max-width: 400px;
/* height: 250px; */ ---> delete
padding: 30px;
border-radius: 5px;
box-shadow: 10px 4px 30px var(--shadow-color);
}
That is my brief summary. If you have any more questions feel free to ask. Good luck Mostafa :)
Marked as helpful
@mo-oe
Posted
@SasaVatic , this is very helpful, at first I was wondering why my text and logo are overloading outside their parent div, now I figured it out "because of fixed height" thanks to you. Thank you very much for this input :)
@SasaVatic
Posted
@mo-oe You're welcome :)