Skip to content
OverviewSolutions
23
Comments
5
Jordan Herrera Vera
@jordanheve

All comments

  • MHAMED OUZED•130
    @Mohda24Submitted 11 months ago

    i think its simple projuct i didnt have a lot of difficult but i think the only problem is when i wanted to center it

    QR-code-component

    2
    Jordan Herrera Vera•490
    @jordanhevePosted 11 months ago

    Congratulations on completing the challenge! Your commitment to learning is commendable. Regarding centering elements within a document, I recommend using CSS properties like 'margin: auto' for block-level elements or 'text-align: center' for inline elements. Experimenting with flexbox or grid layouts can also provide more advanced centering options based on your specific requirements. You can center elements using flex like this

    .container {
  display: flex;
  justify-content: center; /* Center horizontally *
  align-items: center;  /* Center vertically */
  min-height: 100vh;/* Full viewport height */
}

    Each element inside the .container will be centered. Keep up the fantastic work in your coding endeavors! . Keep coding and exploring new ways to enhance your skills

    Marked as helpful
    1
  • SinBin10•20
    @SinBin10Submitted over 1 year ago

    Hello, I am Binay, thank you so much for putting this project out it was really fun to build.

    I have a doubt regarding the project, How do I add the shadow which is shown in the desktop version?

    Hoping for a reply, Thank you again.

    Result Summary using CSS grid Mobile-First approach

    1
    Jordan Herrera Vera•490
    @jordanhevePosted over 1 year ago

    Hi great job completing this challenge, to add shadows in CSS, you can use the box-shadow property. The box-shadow property allows you to create shadows around an element. box-shadow: horizontal-offset vertical-offset blur-radius spread-radius color;

    Here's an example:

    .main-element {
box-shadow: 5px 5px 10px #888888;
}
    1
  • Reno08-code•300
    @Reno08-codeSubmitted over 1 year ago

    Hi ~Everyone, I need your help. When the screen is larger than 768 pixels, only half of my content is displayed, and the thank-you div is also not centered on the screen. I have been trying for a long time to solve this problem, but nothing seems to work. Can anyone help me figure out what's going on? Thank you.：）

    Newsletter-sign-up-form-with-success-message

    2
    Jordan Herrera Vera•490
    @jordanhevePosted over 1 year ago

    Hi! I would recommend moving the .thankyou div inside the main element and wrapping the form in another div element to center the main content. Usually, I do this on the body:

    body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}

    The min-height value tells the browser to use 100% of the screen height. By default, it uses 100% of the width but not the height. So, by doing this, you can now center the main container.

    I hope my comment is being helpful to solve your problem Keep coding! :D

    Marked as helpful
    0
  • IgnatiusVisnu•70
    @IgnatiusVisnuSubmitted over 1 year ago

    I find difficulties on controlling the left and the right gap of the QR code image and the white space. That resulted in me not being able to make a more similar looking website compared to the design, as I feel that aforementioned gaps in the design are smaller than the one I made. Instead of minimizing those gaps, I used paddings to push the image lower, to match the left and right gaps which I couldn't control. Feedbacks are very appreciated on how to solve it

    Basic QR code component

    4
    Jordan Herrera Vera•490
    @jordanhevePosted over 1 year ago

    I would recommend using REM or EM units instead percentage units for example:

    main {
  padding: 2rem;
  margin: 1rem;
}

h2 {
  margin-left: .5rem;
  margin-right: 5rem
}

    I usually use percentages to manage the width or height on some divs or buttons hope I've helped :)

    0
  • Jordan Herrera Vera•490
    @jordanhevePosted over 1 year ago

    On the css document I would use the * selector to remove margin and padding, instead typing most tag selectors like this:

    * {
margin: 0;
padding: 0;
}
    Marked as helpful
    1