Frontend Mentor | newsletter-sign-up-with-success-message with tailwind coding challenge solution

Solution retrospective

What specific areas of your project would you like help with?

did here other way to implement?

group-[:invalid:focus-within]:block, I try to write group-invalid:focus-within:block but it's not working。group-invalid:block or group-invalid:block It's not working.

did some method can change marker position? such as marker:mt-1

Community feedback

JaceLee• 240

@jaceleedev

Posted about 1 month ago

Hi, I'm feeling great because I think I successfully completed the project. Your questions led me to discover new things I didn't know before. Unfortunately, your questions are about topics I'm not familiar with either. However, how about trying this approach? (It's just my idea, so there's a good chance it could be wrong.)

<div class="group">
  <input class="peer" type="text" required />
  <p class="hidden peer-invalid:group-focus-within:block">Error message</p>
</div>

/* Custom CSS */
.your-class::marker {
  margin-top: 0.25rem;
}

Anyway, have a great day and enjoy coding!

mofada• 310

@mofada

Posted about 1 month ago

@Jaceleedev, thank you for your help, but margin-top is not effective for markers. Only padding-left/padding-right and margin-left/margin-right will take effect. You can refer to this article everything you have to know about the gap after the list maker

stackoverflow has a question: css-control-space-between-bullet-and-li

newsletter-sign-up-with-success-message with tailwind

Design comparison

Solution retrospective

Community feedback

Please log in to post a comment

Join our Discord community