Skip to content
OverviewSolutions
6
Comments
14
Lawrence
@lwrncgmbn

All comments

  • @calebakomaye•40
    @1a2-b3c4dSubmitted about 1 year ago

    I had difficulties try to create the desktop version At last I couldn't so I'm just gonna submit it like so.

    I would really appreciate if someone could help me out with how to create a desktop version thanks.

    Html and Css Product preview card

    3
    Lawrence•180
    @lwrncgmbnPosted about 1 year ago

    Hello there 😁

    To make that work in a desktop view, you can use display:grid; or display:flex for that. There are lots of tutorials on YouTube, or you can read different documentations to learn it. Also, to put your main container in the middle, you can use display: flex; justify-content:center; align-items:center min-height: 100vh;.

    Happy Coding 😁

    Marked as helpful
    0
  • Lawrence•180
    @lwrncgmbnPosted about 1 year ago

    I think you link the wrong directory for the website, but the code redirects to the code for the product page.

    0
  • Lawrence•180
    @lwrncgmbnPosted about 1 year ago

    Hello there 😁

    • You can try to remove the margin-top: 40px in the .main{}
    • And add display: flex; justify-content: center; align-items: center; in the body{}

    With this you can put the card in the center without putting any margin-top or padding-top

    Happy Coding 😁

    1
  • Jean•10
    @Jeanmello20Submitted about 1 year ago

    vscode

    1
    Lawrence•180
    @lwrncgmbnPosted about 1 year ago

    Hello there 😁

    • I noticed that the actual design is too big and you manually put the margin for top and bottom. You can try to remove margin-200px; margin-bottom: 150px; and add these display: flex; justify-content:center; align-items:center min-height: 100vh;
    • For the main .conteudo{} you can remove the margin: 0 auto; and min-height: 100vh and just add padding: 2rem 0;
    • Also, in the main .qr{} you can remove width: 89% and margin-top: 35px
    • And lastly, you change the margin: 40px to margin: 0 2rem;

    Happy Coding 😁

    0
  • Lawrence•180
    @lwrncgmbnPosted about 1 year ago

    Hello there 😁

    You can try to remove unnecessary lines of codes, for example:

    • In the body, you can remove the padding: 40px; so it will be centered on any screen without any extra spaces or padding.
    • And in main you should remove the position: absolute;, and the flex-direction: row; since the default direction of display:flex; is row.

    Happy Coding 😁

    Marked as helpful
    0
  • Lawrence•180
    @lwrncgmbnPosted about 1 year ago

    Hello there 😁

    To center the box itself, you can try to:

    • Remove the margin-top: 3rem; in the .box
    • And replace it with min-height: 100vh;

    Happy Coding 😁

    Marked as helpful
    0
  • Lawrence•180
    @lwrncgmbnPosted about 1 year ago

    Hello, you can try to remove this from .container{}:

    margin: 0 auto;  
margin-top: 5rem;

    And add this to the body{} to put the container in the center without using margin-top:

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

    Happy Coding 😄

    0
  • Lawrence•180
    @lwrncgmbnPosted about 1 year ago

    Hello, I noticed that the container itself is not centered, you can put this in the body {}:
    min-height: 100vh

    And remove the margin-top: 125px; in the .container{}.

    Happy Tasking 😄

    Marked as helpful
    0
  • Lawrence•180
    @lwrncgmbnPosted about 1 year ago

    To add the cart icon inside the button in "Add to Cart",

    You can put the <img> and <p> inside the <button>

    It will look like this:

    <button>
    <img src=(icon path) alt=(alt text)>
    <p>Add to Cart</p>
</button>

    Happy Coding 😁

    1
  • Lawrence•180
    @lwrncgmbnPosted about 1 year ago

    Hello, I see that you use your own product to show in the design, but in terms of that I noticed the color choice is a little bit off, the weight of the font title can't be read easily, and make sure the text can be readable, and lastly it's not mobile responsive.

    Happy Coding :D

    0
  • Lawrence•180
    @lwrncgmbnPosted over 1 year ago

    Hello, the things I noticed are:

    • The minus and plus sign, I think its better if you put the plus to the right and minus to the left
    • In the cart, the remove button is not working
    • Also you can change how the cart works, since it's the same product you can just make the count add up, instead of putting a different list with every press of the button
    • Lastly, it's not working in the mobile layout

    Happy Coding 😁

    0
  • Zachary Campanelli•390
    @ZacharycampanelliSubmitted over 1 year ago

    I wasn't sure if I should center the card no matter the page width, but being provided two very different sizes for screen layouts I just created two options/placements. If it would have been better to keep the element centered no matter the width I would change it to do so, but was a little unclear on this

    QR-Code-Component

    2
    Lawrence•180
    @lwrncgmbnPosted over 1 year ago

    You can use

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

    To put the entire content in the center. Also you need to start at least using <h1> element first, And you can also use <div id="container"> or use <main>, and then put all the other elements inside.

    Happy Coding 😁

    0