Skip to content
OverviewSolutions
20
Comments
3
Mahmoud Attia
@attia-mahmoud

All comments

  • Mahmoud Attia•330
    @attia-mahmoudPosted about 2 years ago

    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
    @GoorezyESTSubmitted about 2 years ago

    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-mahmoudPosted about 2 years ago

    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-mahmoudPosted over 2 years ago

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

    1