I'm a complete noob in web dev, here I tried to replicate the website as best as I could. I had a problem with the music icon & pricing section, I couldn't manage to position them correctly.
also had problems with the payment & cancel buttons.. I couldn't separate them on lines without ruining their position
@chriskorsak
Posted
Hi,
To address your second paragraph:
My understanding is that <button> and <a> elements are both inline elements, not block-level. That's why they are stacking up on one line. You could wrap each in a block-level element like a <div>, or use a (display: block;) css rule for the element.
Hope this helps, -Chris
@kennyputman
Posted
Hey, looks great!
Positioning and centering is always difficult. I suggest looking into flexbox to help with this one.
Here are some helpful links for it:
You can wrap items in a div and then use flexbox to position them. for example wrapping the payment and cancel buttons in a div and then setting it to display: flex and flex-direction: column will move those into a vertical stack.
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
