Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Newsletter sign-up form with success message

Vishal 260

@vishal-singh5128

Desktop design screenshot for the Newsletter sign-up form with success message coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


The area where i'm unsure of my code is whenever i switch from desktop to phone's dimension in google dev tool, both the images disappear and require a refresh for the image to appear again . Is there any help you can provide to tackle the problem ?

and furthermore can you suggest any best practise to solve the problem Thank You for your help

Community feedback

Brendan 1,120

@OneManBanned

Posted

Hi Vishal,

It's visible for me on mobile mode.

It maybe a problem with zoom. When you're looking at in responsive mode try pressing ctrl + 0(On windows). to reset the zoom.

Here are some observations on your solution.

HTML

  • The .main container <div>. Should be a <main> landmark element. Landmark elements help to give your page structure.

  • Your li tags don't have closing tags and they all need to be wrapped inside a ul

  • The <h6> tag should be a <label> connected to the <input> like this ---

<label for=email" />Email address</label>
<input type="email" placeholder="[email protected]" name="email"</input>

here is the mdn page on labels and how to connect them to an input.

Happy coding, Brendan

Marked as helpful

1

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