Skip to content
OverviewSolutions
10
Comments
5
Edson Ruiz
@xedsonruizx

All comments

  • Edson Ruiz•160
    @xedsonruizxPosted over 1 year ago

    Hi. Have do you try Git-Fork before as a tool to manage your proyect? It is easy to use.

    Marked as helpful
    1
  • Edson Ruiz•160
    @xedsonruizxPosted over 1 year ago

    Hi

    you could change the 100% width of the "col-" with an especific width that does not change with the size of the page.

    also for a better responsive way the grid class replace the 30% with a 50%

    send the "eth" text to the left

    and send the "clock" text to the right

    .grid {
    display: grid;
    grid-template-columns: 50% 50%;
    justify-content: space-between;
}

.eth {
    text-align: start;
}

.clock{
    text-align: end;
}

I hope it helps you
    Marked as helpful
    0
  • Edson Ruiz•160
    @xedsonruizxPosted over 1 year ago

    Hi, actually you have to use, someone told before.

    • mix-blend-mode: multiply It is to combine the background 'purple' with the image above it.
    0
  • nattyrice•20
    @nattyriceSubmitted over 1 year ago

    Updated:

    I sorted out the vertical centering using just flex. I'll probably switch to @0xAbdulKhalid's grid solution though.

    I also got rid of my media queries by just using min() in my max-width.

    I was in the middle of trying to dial in the exact card dimensions when I discovered there was a screenshot/month limit.

    Orignal:

    I had trouble automatically centering the card vertically using grid. In the end I just settled for getting the top margin to 8vh.

    I am unsure of if I handled the media queries and responsiveness in an optimal fashion. I suspect I could have used clamp to simplify some things. Perhaps min or max as well.

    I wasn't sure what to do for the slight drop shadow on the card. I did my best to eyeball it.

    QR Component using vanilla html/css w/ flex

    2
    Edson Ruiz•160
    @xedsonruizxPosted over 1 year ago

    Hi i have some corrections for you, I am not an English speaker so If you dont understand something send me an email to [email protected], I will try to help you.

    • body size 100 just add to your css code

    body { height: 100%; }

    How to make body and html 100 heght

    • Center vertical card

    there is some ways to center a card in the middle of the page this is what I used code example and playground

    with this you can delete the top margin top from media query. I hope this will help you.

    Marked as helpful
    1
  • Destany•50
    @destanyrSubmitted over 1 year ago

    I would love some feedback on what I could add or remove for better functionality. I know it's not spot on but I got pretty close.

    Unfortunately, I'm not understanding why the images won't load up. Insight on this would be wonderful. This was my first project and repository in GitHub and I could use all the help I can get.

    QR Code Component Solution

    2
    Edson Ruiz•160
    @xedsonruizxPosted over 1 year ago

    Hi i have some corrections for you, I am not an English speaker so If you dont understand something send me an email to [email protected], I will try to help you.

    • body size 100 just add to your css code

    body { height: 100%; }

    How to make body and html 100 heght

    • Center vertical card

    there is some ways to center a card in the middle of the page this is what I used code example and playground

    • Add Img from your folders

    when you call an image from your folder, you dont have to write all your pc path in this case you have to write src="./images/image-qr-code.png" to get you image.

    I hope this will help you.

    0