Skip to content
Submitted over 3 years ago

Fylo dark theme landing page - mobile version first

Beshoy S.•460
@BeshoyS
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Fylo dark theme landing page
  • HTML
  • CSS
  • JS
2junior

Design comparison

SolutionDesign

Solution retrospective

Hi guys, this challenge was pretty good but I have two questions:

  1. how I can customize the error message for the email input in an easy and simple way?
  2. I always confused about which sizing parameters (px, %, em, rem ...etc) it's suitable to use to make a good responsive design?

I will be grateful to someone explaining these questions to me.

Community feedback

  • Jesse•430
    @jesse10930Posted over 3 years ago

    Hey BeshoyS, your project is looking good!

    For your first question, if you are just wanting to change the message text, you can add the 'oninvalid' attribute to the input element. It has a bit of a wonky format, which you can see below. You can then set the text to whatever message you would like to send the user.

    <input 
    type="email" 
    name="email" 
    value="" 
    placeholder="[email protected]" 
    pattern="/^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/"
    required="" 
    oninvalid="this.setCustomValidity('Please enter a valid email address')"
>

    If you are looking to change the popup box styling, I'm not really sure how to go about that.

    Hope this is helpful! Great project!

    0

Please log in to post a comment

Log in with GitHub

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