Skip to content
Submitted about 2 years ago

Responsive design Intereactive Rating component using flexbox

Vishnu_31•230
@vishnu-31
A solution to the Interactive rating component challenge
Preview (opens in new tab)Code (opens in new tab)

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.

Code
Couldn’t fetch repository

Please log in to post a comment

Log in

Community feedback

  • P
    markus•2,740
    @markuslewin

    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
  • Prince Chukwu•250
    @cprincec

    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.

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