Skip to content
OverviewSolutions
9
Comments
9

jen067

@jen067190 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

View more solutions

Latest comments

  • jen067•190
    @jen067

    The code is clean, but there are a few areas that can be improved

    1. Remove height: auto because when I enter the page after a successful authentication, the container's height is insufficient, causing a vertical scrollbar to appear. I tried removing height: auto, and the original layout remains the same without the scrollbar.

    2. When checking for the presence of error messages via the button, you could use add and remove instead of toggle. I believe the error message should persist when the input format is incorrect, but toggle will cause the error message to disappear if I press the button an even number of times, even when the input is still incorrect.

    3. Perhaps you could add code to clear the input fields after a successful validation, instead of keeping the previous data in the fields.

    Marked as helpful
  • P
    Nikita Vologdin•710
    @NikitaVologdin
    What challenges did you encounter, and how did you overcome them?

    I decided to remove padding bottom from article for now. because have not found way how to match "share arrow icon" with block which appears after click on button and align that icon with content in appearing block. Unfortunately if add same padding-bottom value to the block in creates disproportional look for content vertical alignment.

    Article-preview-component

    1
    jen067•190
    @jen067

    Overall, it's excellent. It seamlessly switches between different screen devices without any errors. Here are a few areas I noticed that could be improved:

    1. Perhaps you could add more padding to the button, as the icon area currently seems a bit too large, making the icon appear off-center within the container.
    2. It might be due to the transition setting, but on mobile devices, when the text "share" disappears, you can clearly see it gradually fading out instead of disappearing instantly. This might be something that can be improved.
    Marked as helpful
  • jen067•190
    @jen067

    Great Job !!

  • jen067•190
    @jen067
    1. The footer content easily overlaps with the last card on mobile.
    2. Only the top-left and top-right corners of each card's colored area should have rounded corners, while the rest should remain straight.
    3. You can use box-shadow: 0 y-axis offset blur to create the shadow effect initially requested.
    4. The card's title text should have a font-weight set.
    5. Mobile sizes are typically below 768px, but in your case, the layout switches to mobile around a screen width of 980px.

    Another interesting thing is that when the screen size is reduced to below 300px, it applies the desktop styles again, which is also something that can be adjusted

    Marked as helpful
  • jen067•190
    @jen067

    1. In terms of CSS, it might be helpful to use a CSS reset more frequently, followed by the :root selector, and then proceed with other style settings.

    2. For using font-family, consider using CSS variables, like: --ff-montserrat: 'Montserrat', sans-serif; --ff-fraunces: 'Fraunces', serif;

    3. gap: 1rem; only needs a single semicolon.

    4. Good use of flex-basis helped me solve my layout problems.

  • jen067•190
    @jen067
    1. You can add padding-left to the li elements to increase the spacing between the list-style and the text.
    2. On mobile or smaller screens, according to the illustration, the content should be aligned to the top, bottom, and edges, and the border-radius should be removed.
    3. There should be a divider between "Ingredient" and "Instruction" to distinguish the sections, which can be achieved by using pseudo-elements in the container.
    4. You can add a CSS reset to help with the layout.
View more comments