Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Responsive Webpage, using basic Jquery and SASS

#jquery#sass/scss
Miguel Ruizβ€’ 20

@MikeAngel2

Desktop design screenshot for the Interactive rating component coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


2nd card (Thanks Card) cannot center elements properly, can someone help me with that?

Community feedback

Byronβ€’ 2,180

@byronbyron

Posted

Hi @MikeAngel2

You should be able to center the second card by updating your index.js to set display flex instead of block.

$(".Thanks").css('display','flex');

This bit of CSS should help to center the text on the second card as well

.Thanks {
    align-items: center;
    text-align: center;
}

Hope that helps!

Marked as helpful

2

Miguel Ruizβ€’ 20

@MikeAngel2

Posted

@byronbyron Hi Byron

Thank you for your feedback.

I changed this my JS code to yoyr recommendation, it seems that only affected element is the image; The "Selected X stars" div, from the second card seems that aligns it's text, but not the div itself.

Definitely helped! Kind of annoyed for that little detail in my code lol.

0
Kamasah-Dicksonβ€’ 5,610

@Kamasah-Dickson

Posted

So your star IMG is not showing and also there is no margin left and right on the container. Its spanning horizontally on smaller devices. Hope you fix it. Besides good job, keep codingπŸ‘πŸ‘

1

Please log in to post a comment

Log in with GitHub
Discord logo

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