Skip to content
OverviewSolutions
17
Comments
7
WondaBwoy Kelvin
@WondaBwoyKelvin

All comments

  • uthmvn•10
    @uthmvnSubmitted about 1 year ago

    Hello everyone. First, please excuse my somewhat stupid questions as I am a total beginner in web development.

    Here is my version of the QR code component challenge.

    Although the rendering seems pretty good, I struggled a lot when it came to center the #container div (horizontally and vertically). I noticed that if the element’s position is set to absolute and you directly apply margin: auto; on it, it’s not going to work. This article (https://programmersportal.com/fix-margin-auto-not-working-with-position-absolute-problem-in-css/?utm_source=pocket_saves) explains that to center horizontally a absolutely positione <div> using "margin: auto;", we should apply a width and specify "left : 0; right: 0;" to that <div> element. In the same way, to center vertically, we should apply a height and specify it a "top: 0; bottom: 0;". It did work, but I still don't understand why.

    Apart from that, since this is my first project, could you advice me better practices or other faster/easier ways to do that ? Take in consideration that I did not learn anything about Flexbox or Grid, yet.

    (sorry for poor english)

    Thanks in advance !

    QR code component using basic CSS properties

    3
    WondaBwoy Kelvin•260
    @WondaBwoyKelvinPosted about 1 year ago

    I think with the centering you can either display flex or use the margin property, where you set margin:4rem auto; this will put the container right in the middle, and the 4rem is for the top and bottom margin while the auto is for left and right. I hope this helps, if not you can hit me up on all social media platforms @wondabwoykelvin to help you out.

    Marked as helpful
    1
  • NBD•240
    @bdal90Submitted about 1 year ago

    Dear All,

    Here is my next challenge, still an easy one, but full of real challenges to me. The biggest one here is that I was starting to use percentages instead of fixed sizes, like width or height because I have been warned about avoiding the latter. However, I noticed that here, it worked better to add a fixed width to keep it responsive. Why is that? Is there a consesus on when to use percentage and when adding specified amounts is preferred?

    Thank you for checking out,

    Cheers to you all,

    Dalma

    Next Challenge, Still Learning...

    1
    WondaBwoy Kelvin•260
    @WondaBwoyKelvinPosted about 1 year ago

    Great work, there are some issues, it is not supposed to be scrollable. The head of your container cannot be seen. I think these videos can help you out with the measurement. https://youtu.be/N5wpD9Ov_To?si=q2eqvPSuNNglebKz https://youtu.be/IWFqGsXxJ1E?si=JqRX_wak1mZ73vk2

    0
  • Sachin•30
    @SinniS1Submitted over 1 year ago
    • QR-CODE-COMPONENT-MAIN
    • Project is on CodeSandbox
    • Made with vite + typescript + tailwindCSS

    QR-CODE-COMPONENT-MAIN

    1
    WondaBwoy Kelvin•260
    @WondaBwoyKelvinPosted over 1 year ago

    Top notch, superb .Can you share where you got your images ?

    0
  • Univer4219•40
    @Univer4219Submitted almost 2 years ago
    • What I found difficult was the positioning and mobile responsiveness, I only did the desktop preview.
    • I am very sure of my codes.
    • I would love to know more about best practices but I currently don't have any questions

    Desktop Design Product Card

    1
    WondaBwoy Kelvin•260
    @WondaBwoyKelvinPosted almost 2 years ago

    The container needs border-radius as well as the image, check out the style guide in the folder you downloaded to get the right fonts as well as the colors. I haven't got much experience but you can check out my code and website. Site https://app.netlify.com/sites/astonishing-frangollo-1c7ae2

    code on GitHub https://github.com/WondaBwoyKelvin/product-preview-card

    it is not perfect but could help you out a lil

    Marked as helpful
    0
  • WondaBwoy Kelvin•260
    @WondaBwoyKelvinPosted almost 2 years ago

    upload picture using the img element in html, also when you create the container then you put the image right before any content. < img src="you can use a backslash to get folder paths" alt="a word about the image">

    Marked as helpful
    0
  • WondaBwoy Kelvin•260
    @WondaBwoyKelvinPosted almost 2 years ago

    everything thing is fine on ma end but when i upload everything seems not to work out

    0
  • WondaBwoy Kelvin•260
    @WondaBwoyKelvinPosted almost 2 years ago

    You need to increase your border-radius a lil bit more and also check on the font for the improve text.

    1