Submitted 11 months ago

Responsive design Intereactive Rating component using flexbox

Vishnu_31• 230

@vishnu-31

Preview site View code

This is a solution for...

Interactive rating component

HTML
CSS
JS

1newbie

View challenge

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• 1,430

@markuslewin

Posted 11 months 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

Vishnu_31• 230

@vishnu-31

Posted 11 months ago

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

Prince Chukwu• 250

@cprincec

Posted 11 months 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.

Please log in to post a comment

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