Skip to content
OverviewSolutions
27
Comments
10
Ricky
@pyaetheiN

All comments

  • Ricky•470
    @pyaetheiN

    Hello Vanza! The amount of extra work you put into this challenge is amazing and I would love to add them into my solution too. However, I've a few questions...

    • How do u redirect your page to display "Thank you!". I don't see any extra html files nor additional line of codes for that redirected page... Would you mind explaining me how things worked?
    • I also don't understand the difference between capturing groups and non-capturing groups in RegEx patterns so could you explain to me in simpler terms?
    Marked as helpful
  • Ricky•470
    @pyaetheiN

    Good job completing the challenge! For the background, you should add

    • background-repeat: no-repeat to fix the repeating background and
    • background-size: contain to fit the background inside every screens

    Make sure to check the report on accessbility and html issues too.

  • Ricky•470
    @pyaetheiN

    Hello! Your solution is awesome :) I learned a lot from it especially the stopPropagation() method. I was stuck on that part as the navbar keep closing when I clicked the navlink so checking your solution out turns out very well for me. Thank you and keep up the good work!

  • Ricky•470
    @pyaetheiN

    Hello Halibal! Nice job completing the challenge, love that you added a different nft :) Anyways about your questions,

    • remove width: 100% and add padding: 0 1rem to your body tag
    • make a media query where you make the font sizes smaller and that should make your design look a lot better in smaller screens

    I don't really recommend you adding width property on body tag, just add height or min-height and only add width when you need to on containers inside body. That's it for my feedback, happy coding as always!

    Marked as helpful
  • Ricky•470
    @pyaetheiN

    Hey there @ExiviuZ ! Your solution looks good overall. You forgot to add

    • cursor: pointer to things you add hover effects on
    • card image background-color when hovered so make sure you fixed them.

    If you've any other difficulties, just ask me.

  • Ricky•470
    @pyaetheiN

    Hey buddy, nice work on completing the challenge but you still got lots of things to fix so take a look at my solution on this challenge ( https://github.com/pyaetheiN/QR-code-component ) It's not as hard and stressful as you think, you just gotta understand how embedding elements inside containers works and most importantly learn flexbox first.

    Marked as helpful
  • Ricky•470
    @pyaetheiN

    Hello Matias! Great job completing the challenge however there're things you have to fix, so here it is...

    You need to add:

    • display: flex;
    • align-items: center;
    • min-height: 100vh;
    • justify-content: center;
    • background-repeat: no-repeat;
    • background-color: hsl(225, 100%, 98%);
    • padding: 0 1rem;

    inside <body> tag and

    • max-width: 400px instead of width: 30%; inside your .container class

    I hope my feedback is helpful for your solution.

  • Ricky•470
    @pyaetheiN

    Hello Vanza, I was having a hard time trying to understand your calc(47vw + 15%) and calc(65vh - 15vw).

    Is there a documentation or a video about using calc with view-width plus percentage and view-height minus view-width?

  • Ricky•470
    @pyaetheiN

    Hey there! I want to help you but I can't access your github repository. Make sure you fixed that right so that I can see your codes and help you.

    Marked as helpful
  • Ricky•470
    @pyaetheiN

    Hello! It took me a while to find out the problem,

    I will explain step by step:

    • remove height: 50%; max-height: 50rem; min-height: 40rem;" from your ".cards" class in style.css because of your height properties , it doesn't work in mobile screen
    • remove overflow: scroll; because it's ugly and add padding: 5rem 0; in your ".cards" class in responsive.css to have spaces between top and bottom of the page

    That's the solution for your problem you're pretty much good to go after doing these steps.

    Things you forgot to add:

    • change card titles font-family
    • add border-radius on first and third card
    • add line-height in your ".card-paragraph"

    In my humble opinion, I recommend you to avoid using heights too much. It isn't required in every layout, it automatically wraps up the content inside it.