Hi there, great work.
I am seeing a couple of issues with your project.
First of all, your HTML has some validation errors. (You can validate your HTML here: https://validator.w3.org/)
The first issue is that we can't use any <section>
or <div>
inside of the <ul>
.
In this case, you can remove the <section class='desktop-error'>
and it will work fine.
Another issue is that it is better not to use a trailing slash /
on a self-closing element. For example, you are using an input tag as
<input type='text' ... />
which can be used as
<input type='text' ... >
You can read the reason here https://github.com/validator/validator/wiki/Markup-%C2%BB-Void-elements#trailing-slashes-in-void-element-start-tags-do-not-mark-the-start-tags-as-self-closing
The third issue is that we can't use <span>
as a child of <ul>
. Instead, you can put <span>
inside the <li>
tag.
For example, you are showing an error message as:
<li>
<input type="email" id="mail" name="user_email" placeholder="Your email address..."
class="form-input border-round">
</li>
<span role="alert" id="emailError" aria-hidden="true">
<em>Please provide a valid email address</em>
</span>
But, it is better to do it this way,
<li>
<input type="email" id="mail" name="user_email" placeholder="Your email address..."
class="form-input border-round">
<span role="alert" id="emailError" aria-hidden="true">
<em>Please provide a valid email address</em>
</span>
</li>
The final issue I am seeing is that the image is overflowing on smaller devices and that is because you are setting fixed width using rem unit.
I saw on line 75 of style.css
that you are setting max-width: 100%;
on img and picture tag. However, I saw no effect of using it.
Instead, you can set width: 100%;
so that the image takes full width on the smaller screen and takes maximum 35.45188rem
when the device width is larger than 35.45188rem
.
This way you can make the image responsive.
Thanks.