Frontend Mentor | Basic HTML and CSS (with Flexbox) coding challenge solution

Mo• 840

@MohamedAridah

Posted almost 2 years ago

Hello @tbrownlee, you did Great for this challenge, it's also Responsive so good job.👏👍

your styles to .main is extra and has no purpose. So Remove it.
using flex with the <img> is also can be Removed. the <img> element isn't parent for an any element so display: flex will do nothing.
instead of giving width property to the .text or the <img> you can just let them take 100% of the width and use padding property to control and give the outer space around the .container.
it's better to use rem units for font-size and somethings like that. em is relative to the font-size of its direct or nearest parent . rem is relative to the HTML (root) font-size. Read this Article for better understanding.
you can see My solution for this challenge it may be helpful for you..!

I hope this wasn't too long for you, hoping also it was useful😍.

Goodbye and have a nice day.

Keep coding🚀

Marked as helpful

@tbrownlee

Posted almost 2 years ago

@MohamedAridah thanks for your advice again!

I fixed the problems you mentioned. I also swapped some css properties between body and main to keep main.

I changed em to hard-coded px. I'll use rem on my next problem to figure it out and then I'll loop back and update this solution.

Basic HTML and CSS (with Flexbox)