Skip to content
Submitted about 4 years ago

Typemaster Prelaunch - Questions about images!

P
Dave•5,295
@dwhenson
A solution to the Typemaster pre-launch landing page challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

I have a few issues with this one that I would welcome feedback on, mainly related to images.

  1. The orange icons look distorted on Chrome and Firefox, but not Safari. I have tried to get the aspect ratios working, but I can't manage it and maintain the overall icons at a consistent size. Any advice on how to approach this would be appreciated as I've stumbled on this issue a couple of times.

  2. I should have adjusted the 'hero' image so that it aligned flush with the viewport at smaller viewports, and the opposite for the the second image (flush against the opposite side). I tried adjusting using a relative positioning, but it didn't maintain the margin on the side that wasn't flushed, and a few other random things that didn't work. Any ideas?

Thanks for any other comments and feedback. I am loving SCSS more with every challenge now and while I'm really glad to have waited a good while before trying it out it is really speeding up my work now.

Code

Please log in to post a comment

Log in

Community feedback

  • ApplePieGiraffe•30,525
    @ApplePieGiraffe

    Hey, Dave! 👋

    Just wanted to drop in to say great job on this challenge! 👏 I don't really have much to suggest here since everything seems pretty good to me (and I believe you got those issues with the images sorted out)! 😀

    Sass really is a lot fun and it's nice to hear you're enjoying it more and more! 👍

    Keep coding (and happy coding, too)! 😁

  • Chamu•13,800
    @ChamuMutezva

    Hi. You are on a roll Dave. Well done. I could not see the issue with icons as they are not showing in my browser. I have done the same project and what i did was to wrap the icons in a div and then controlled the div's dimensions. You can see my solution on here The footer content is not center aligned in the center as per design but other than that , this is good Happy coding

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord