Skip to content
OverviewSolutions
8
Comments
8

Christopher Mothuli

@Sirch980 points

I am an inspiring Software Developer.

Latest solutions

View more solutions

Latest comments

  • Christopher Mothuli•80
    @Sirch9

    Great Work.

  • P
    Suhas Patnaik•190
    @SuhasPatnaik
    What are you most proud of, and what would you do differently next time?

    Getting the supervisor and calculator card to the vertical center of their respective columns was challenging for me. Also, feel like the CSS is pretty crispy on this project, really proud of that.

    What challenges did you encounter, and how did you overcome them?

    Getting the supervisor and calculator card to the vertical center of their respective columns was challenging for me. My solution:

    grid-row: 1/3;
align-self: center;

    Code explanation:

    • 1st line of code says that our element occupies the 1st and 2nd rows.
    • 2nd line of code ensures that the element is positioned in the vertical center of the assigned space.
    • Ensures it doesn't stretch fully from the top to the bottom of these rows, hence only taking up the necessary height for its content.
    What specific areas of your project would you like help with?
    • Just general feedback in terms of best practises wherever needed would be great.
    • I know from a web accessibility standpoint a lot of improvements can be made. Will be taking care of that in future projects.

    Responsive Four Card Feature component

    #semantic-ui#accessibility
    1
    Christopher Mothuli•80
    @Sirch9

    Great Work.

  • Christopher Mothuli•80
    @Sirch9

    Looking Good!!

  • Christopher Mothuli•80
    @Sirch9

    Nice work! I hope my feedback makes sense to you, as I’m not as skilled as you are. I noticed that your navigation container isn’t quite responsive between widths of 320 and 425 pixels. The elements look a bit "squashed" and don’t display well.

    I understand the design was provided this way, but I think a burger menu would be a much cooler solution.

  • Chris Bui•90
    @chrisvn1808
    What are you most proud of, and what would you do differently next time?

    I appoached this project different with previous projects.

    I plan ahead HTML, CSS structure, what semantic HTML tag should I use, what utility classes will help me achieve consistent look.

    I had trouble with how to make the full width image on small screen sizes, but managed to achieve it with negative margin.

    Creating a system like Cube CSS makes writing CSS more fun and rewarding.

    What challenges did you encounter, and how did you overcome them?

    I used this trick to achieve full width image on small screen sizes.

    .recipe__image {
  margin-left: calc(-1 * var(--space-md));
  margin-right: calc(-1 * var(--space-md));
  margin-top: calc(-1 * var(--space-md));
}
    What specific areas of your project would you like help with?

    Any feedbacks on the project would be valuable to me and be appreciated. Happy coding!

    Recipe Page

    #accessibility#cube-css
    1
    Christopher Mothuli•80
    @Sirch9

    Nice, I too struggled with making the image full screen in small screen and I gave up. Besides using those negative margin and "cal()" , Is there a simpler way to accomplish the task in css.

  • Christopher Mothuli•80
    @Sirch9

    Great job

View more comments