Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Request failed with status code 502
Request failed with status code 502
Request failed with status code 502
Request failed with status code 502
Request failed with status code 502
Request failed with status code 502
Request failed with status code 502
Request failed with status code 502
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Typemaster Prelaunch - Questions about images!

P
Daveā€¢ 5,245

@dwhenson

Desktop design screenshot for the Typemaster pre-launch landing page coding challenge

This is a solution for...

  • HTML
  • CSS
2junior
View challenge

Design comparison


SolutionDesign

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.

Community feedback

P
ApplePieGiraffeā€¢ 30,565

@ApplePieGiraffe

Posted

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)! šŸ˜

1

P
Daveā€¢ 5,245

@dwhenson

Posted

@ApplePieGiraffe Thanks as always for taking a look! Great that you didn't have much to say!! Cheers

0
P
Chamuā€¢ 12,970

@ChamuMutezva

Posted

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

1

P
Daveā€¢ 5,245

@dwhenson

Posted

@ChamuMutezva thanks. I love your solution and how you approached these aspects of the challenge. I think I can see a plan for solving these issues now! Cheers!!

1
P
Daveā€¢ 5,245

@dwhenson

Posted

@ChamuMutezva Thanks again - I used your approach for the icons and image adjustments and I think that sorted it. Much appreciated.

0

Please log in to post a comment

Log in with GitHub
Discord logo

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