Responsive order summary component using flexbox and tailwind
Design comparison
Solution retrospective
Displaying a wave pattern without using another div
was a bit tricky. Used a before
pseudo-element for displaying the wave pattern. Initially used the content
property but that did not give much control over the size and locaition of the image. So used the background-image
property on the before
pseudo-element instead.
Community feedback
- @ferditondeurPosted over 1 year ago
I'm no expert and especially not at using Tailwind, but as far as I can see, the background issue could be fixed much more easily. This was my solution for the matter:
body { background: url('images/pattern-background-desktop.svg') #e0e8ff; background-repeat: repeat-x; background-position-x: 50%; } If I'm overstepping, please let me know. Not sure how experienced you are with CSS, but to me Tailwind still seems intimidating, so good for you :)
Marked as helpful1@gtalinPosted over 1 year ago@ferditondeur thank you. This is a much cleaner solution than the one I am using with the
before
pseudo selector. I am trying to improve my command over CSS and HTML. And feedback like this is very helpful. Using Tailwind has helped my workflow. It helps me write CSS quicker. So I am quite enjoying using it. Your command over CSS already seems quite good.0
Please log in to post a comment
Log in with GitHubJoin 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