Four-card feature section. Mobile first

@brasspetals

%'s one of those things that I struggle with. I am slowly getting there. I started to use rem more already, so getting there... Thanks!

@ApplePieGiraffe

On my TODO for some time now =) need to finally make it happen =) Cheers

@ApplePieGiraffe

One additional question if you don't mind =)

I did my solution according to the sketch design and aligned it with "Pixel-Perfect" extension (positioned x: 0, y: 0, scale: 1). And everything got aligned perfectly. But somehow it seems like I have slightly more "padding-top" on the DESIGN COMPARISON ⬆️ . Where is that coming from? I checked some yours designs, and you don't seem to have it. What do I miss? Thanks! 🙏

@ArtemPonomarenko

Hmmm... I haven't actually worked with the Sketch files before, so I couldn't say for sure what might be causing that extra space at the top of your page. 😊

If everything looks aligned with the Pixel Perfect extension, then I suppose it must be an issue with the way the screenshot for the design comparison is taken.

I have a feeling the screenshots are taken in Firefox, but I checked your design there and it looks fine, too. 🤨

I usually just have one tab open with my solution and one tab with the design image and make sure both tabs are set to the same size so that I can compare my solution to the design (the Pixel Perfect extension is nice, but sometimes the opacity trips me up a little). 😀

Perhaps you could try generating a new screenshot by hitting the "Generate New Screenshot" button or go back and decrease the padding in your solution by a rem or two and then generate a screenshot again!