Submitted over 3 years ago

Fylo dark theme landing page - mobile version first

Beshoy S.• 460

@BeshoyS

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Fylo dark theme landing page

HTML
CSS
JS

2junior

View challenge

Design comparison

SolutionDesign

Solution retrospective

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

how I can customize the error message for the email input in an easy and simple way?
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

@jesse10930

Posted 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!

Please log in to post a comment

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