Skip to content
OverviewSolutions
27
Comments
13

Mahdi Rezaei

@MahdiRezaeiDevKabul, Afghanistan500 points

I'm a technical developer passionate about creating clean and simple interfaces. I enjoy coding and building applications that make life easy.

I’m currently learning...

HTML & CSS

Latest solutions

View more solutions

Latest comments

  • Mahdi Rezaei•500
    @MahdiRezaeiDev

    Hello everyone, I have added Linters to this branch in order to check my code for best practices. I have also customized the bootstrap-sass files based on this project's requirements. Now the problem is that the Linters do not pass and there is no error in the mentioned lines by the Linters. I will really appreciate it if someone helps me. Here is my pull request Link

  • Mahdi Rezaei•500
    @MahdiRezaeiDev

    Your solution looks great but, in order to position the content in the center. you can use the justify-content: center property of grid or flex.

    for this, you have to define the container of your card as a grid or flex element and add the mentioned property to it. for your solution, you can use the following peace of code. remove the padding-left and margin-top properties and instead add the following code to the .content class.

    justify-content:center;
align-items:center;

    if it was helpful, mark my comment as helpful.

    Marked as helpful
  • Mahdi Rezaei•500
    @MahdiRezaeiDev

    The problem is, that you have used height: 15% and width: 20%. so on the small screens, the 20% will be so tiny. to solve this you have to define a media query for the small screens, or you have to use the max-width property with the min() function.

    max-width: min(400px, 90%)
height: auto;
margin-inline: auto;

    If it was helpful, mark my comment as helpful.

    Marked as helpful
  • Mahdi Rezaei•500
    @MahdiRezaeiDev

    WOW, really accurate. How do you manage it?

  • Mahdi Rezaei•500
    @MahdiRezaeiDev

    your design is looking perfectly fine. just a little suggestion, it will be better if the user can come back to the rating page once he/she submitted the form. Maybe you can do it by adding an event listener to the body to hide the welcome message and display the form again.

  • Mahdi Rezaei•500
    @MahdiRezaeiDev

    Hello dear, you have done a great job, but it looks like your solution image is not looking the exact same as the challenge. for this, you need to give a pink background to the container of the image and apply the following style to your image.

    mix-blend-mode: multiply;
  opacity: 0.8;

    if it was helpful, mark my comment as helpful.

View more comments