Skip to content
Submitted almost 4 years ago

Form Validation with Vanilla JavaScript & Sass

Frances•165
@frances-m
A solution to the Ping single column coming soon page challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

I'm curious about how web developers handle development for different devices - in my case, when using dev tools to view this site on an iPhone X screen everything looks good. But on my own iPhone X, the social media buttons are warped. I can troubleshoot that issue because I own the device, but are there other tools to help a developer be confident that their layouts will render properly on each specific device?

Thanks for taking the time to check out my project!

Code
Loading...

Please log in to post a comment

Log in

Community feedback

  • Mohamed ELIDRISSI•435
    @elidrissidev

    Hey Frances! Hope you're doing great. First, I just wanna say congrats because you did an amazing job at making this as pixel-perfect as it can be! Unfortunately, regarding your question I cannot provide much help, personally I don't remember I had an issue like that but I could be wrong. Though I have some suggestions regarding your solution:

    • Always make sure your a and button elements have text inside them that describes where that link takes to or what that button does. In your solution for example, the social share buttons should probably be links btw because they will redirect somewhere, but should also have text inside them rather than just images. In this case the design does not show the text, so you can use the "visually hidden technique" which hides the text visually while still making it readable by screen readers.
    • For the social icons, I saw you're using filter to change the color of the img. It looked a bit confusing at first, so one way I'd do it is to inline the svg in your HTML. That way you can set fill="currentColor" and they'll inherit the parent element's color value so you can change it with ease.

    That was all I have, I hope it was not overwhelming. Good luck!

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