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

All comments

  • Anderson Vianna• 240

    @andykallian

    Submitted

    Hello!

    Just trying mobile-first concept in a project. I'm going to add desktop media queries after.

    Suggestions will be welcome!

    Stats preview card component

    1

    Mahmoud Attia• 330

    @attia-mahmoud

    Posted

    Hey Anderson! You did a great job so far with the project! I've got some quick tips that I think you'd find useful.

    Firstly, I would give each div under the 'numbers' class a display: flex; flex-direction: column; align-items: center; to center the text, just like the design. To do this, I would recommend having a shared class name between the three divs, for example, 'meta'. You can then change align-items to flex-start when transitioning to the desktop design.

    Also, I would add align-items: center; to the 'texts' class and set the max-width of the paragraph to something like 30ch to match the design as well. The ch stands for characters and is useful when measuring text length.

    Finally, I noticed you added the image as a background-image. In this project, I would recommend using the picture tag instead, which will help tremendously when you want to switch to the desktop image.

    Last note, I would recommend looking into using a class naming convention like BEM, which I think you would find useful.

    Hope this helps and keep up the great work!

    0
  • Goorezy• 100

    @GoorezyEST

    Submitted

    Hello again Front End community!

    Today I did a new challenge. This time i added my own perzonalisation to it. Also i added some functionality like the theme changer and an icon to my git hub.

    All right, to the point, I have a problem. You will see that in the bottom of the page a little piece of image is overflowing and I try different things but nothing worked, so if you know how to fix this I'm gonna appreciatte the tip.

    I didn't have time to improve the responsive design.

    Like everytime, thanks for seeing my challenge. And every critic is welcome!

    Profile Card Component (Custom Design + Theme Switch)

    1

    Mahmoud Attia• 330

    @attia-mahmoud

    Posted

    Hey Goorezy! I really like the background images and the theme-switch additions, it really gives life to the project! And I see no problems with the responsive design. Overall, you did a great job!

    Regarding your problem, a really simple solution would be to add overflow: hidden to the body element. This would prevent triggering the scrollbar due to any clipping outside the main viewport.

    A tip for best practices would be to avoid using class selectors for elements that appear only once on the page, such as 'body', 'opbg', and 'card', but instead set them as ids, as classes are meant for elements that appear more than once. Also, you can use the footer element directly instead of creating a div with the class 'footer'.

    Hope this helps!

    Marked as helpful

    0
  • Mahmoud Attia• 330

    @attia-mahmoud

    Posted

    First time using SASS 😃. Made everything much quicker and streamlined. Can never go back to vanilla CSS 😆.

    1