Skip to content
OverviewSolutions
8
Comments
8
Ugo Francis
@Vanfrankie7

All comments

  • Katarzyna Kaźmierczak•240
    @KasiaKaz14Submitted 6 days ago
    What are you most proud of, and what would you do differently next time?

    The CSS grid was the most complicated element in the whole project because I have never learnt this feature, so needed to hang out with it more. I am delighted I could deal with it, and arrange the sections in a proper way. The question what I could do differently is hard in this case because I don't know what I could do in another way. Maybe I could have finished project faster, and learnt more about the CSS grid.

    What challenges did you encounter, and how did you overcome them?

    I think that the answer is included in the first reply. The CSS grid was the biggest challenge for me. I haven't known it earlier, so could'nt arrange the grid as it was shown on the template. To overcome the problem I had to spend more time to learn how does it actually work, and try to apply it for the first time. I must admit I also need to use the Internet to find a solution for this question. After a half an hour I managed to resolve my problem and set all the sections according to the template.The key to the solution was grid-template-areas.

    What specific areas of your project would you like help with?

    If someone could recommend me some good websites, apps or another source to learn more about CSS grid I will be grateful. Or maybe someone has a better way to set all elements properly

    Responsive sections using CSS grid

    1
    Ugo Francis•130
    @Vanfrankie7Posted 6 days ago

    Your result is great, the only issue is your card getting stuck at the top of the screen. After checking your code, i found out that maybe the cause is, you used align-items: center; instead of align-contents: center. it is flexbox that uses align-items to center a container. For Grid, it is justify-content and align-content. A shorthand for both of them in CSS Grid is place-items: center;

    if you finish the edits on your editor and push to github, wait a little moment and click on "Generate New Screenshot" in your frontendmentor's page to effect the changes you made in your code here.

    Marked as helpful
    0
  • Ugo Francis•130
    @Vanfrankie7Posted 7 days ago

    Nice job you did there, John.

    Have you considered giving you .head a max-width so that the <P> contents will wrap in a wider screen as shown in the challenge.

    Also, the cards (1-4). Considered giving them the same class each and setting a width to them at your media queries for wider screens?

    Or, what do you think about it?

    0
  • Ugo Francis•130
    @Vanfrankie7Posted 9 days ago

    Nice one, near perfect. you did really well.

    0
  • Ugo Francis•130
    @Vanfrankie7Posted 11 days ago

    Nice one. Near perfect.

    Marked as helpful
    0
  • Ugo Francis•130
    @Vanfrankie7Posted about 1 month ago

    Yo bro, i had the same issue of my container sticking at the top of the view port. i just put min-height: 100%; on the <body> tag which is the direct element of my flex container. And it worked perfectly.

    Take a look at my code;

    body { font-family: "Inter", sans-serif; font-size: 14px; color: hsl(0, 0%, 100%); background-color: hsl(0, 0%, 8%); display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 100vh; padding: 20px; }

    .container { display: flex; flex-direction: column; justify-content: center; gap: 15px; padding: 25px; margin: 0 20px; border-radius: 9px; background-color: hsl(0, 0%, 12%); max-width: 375px; }

    Try it out and see.

    0
  • Ugo Francis•130
    @Vanfrankie7Posted about 1 month ago

    The container is not vertically centered in the viewport. Maybe margin: auto; in the container?

    0
  • Ugo Francis•130
    @Vanfrankie7Posted about 1 month ago

    Nice job getting nearly the exact height and width. You forgot to align your h1 to the center.

    1
  • Asledin-max•150
    @Asledin-maxSubmitted about 1 month ago
    What are you most proud of, and what would you do differently next time?

    Hello there, this is my first code challenge for any feedback you welcome.

    deisgn-qr-code-component-main

    1
    Ugo Francis•130
    @Vanfrankie7Posted about 1 month ago

    Great job Asledin, I noticed that in the desktop version, the container (card) is stuck at the top of the screen. No margin at the top. You could add a margin at the top to see if that would solve the issue.

    0