Skip to content
Submitted over 1 year ago

Responsive design Intereactive Rating component using flexbox

Vishnu_31•230
@vishnu-31
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Interactive rating component
  • HTML
  • CSS
  • JS
1newbie

Design comparison

SolutionDesign

Solution retrospective

i found it difficult to make a span element behave like a word with equal spacing from right and left in a paragraph.

is there a simplere or easier way to do it other than specifing margin for the span?

any feed back is appreaciated.

Community feedback

  • markus•2,250
    @markuslewinPosted over 1 year ago

    It sounds like you want the default behavior for inline content, which means you can remove display: flex from .bubble, and the margin from #scored

    Marked as helpful
    1
    Vishnu_31•230
    @vishnu-31Posted over 1 year ago

    Thank you @markuslewin. It worked when I applied this.

    1
  • Prince Chukwu•250
    @cprincecPosted over 1 year ago

    Hi,

    The difficulty you have in adding a single whitespace on the left and right side of the dynamic rating number is due to the 'flex' display you set to the parent 'section' element (with class of bubble). Take that (flex) out then single whitespaces will work properly around the number.

    1

Please log in to post a comment

Log in with GitHub

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