Skip to content
OverviewSolutions
4
Comments
4
Tomislav Šuto
@RetroApe

All comments

  • Tomislav Šuto•60
    @RetroApePosted about 3 hours ago

    Greetings Jean.

    It seems you had some trouble with the layout. I had a lot of trouble myself with the layout and making everything more responsive. Had to spend a lot of time to solve each issue.

    Looking at the design, the whole card has the same padding size inside the card. So the most efficient way is to give the padding to the card and remove margin/padding for the inside elements.

    The card is also missing margins on top and the bottom.

    One more thing; I wouldn't put the image inside an element (div in your case), but I would have the image be a direct child of the card element. I see you declared height: 100%, which is unnecessary. Just have image go 100% in width, and with previous padding being set up for the card, it would look closer to the design.

    There are a lot of things to learn. I have been following Kevin Powell these days on YouTube to; it helps to watch. Here are 5 tips for responsive layout from him, for example.

    Thinking about the first tip in his video, I would advise to go one step at a time when writing CSS. When you write something, check how it works. If the layout breaks, there must be something that can be done to fix it. That is how I worked on this project.

    This is not mutch, but I hope it helps your development.

    Best of Luck!

    0
  • Tomislav Šuto•60
    @RetroApePosted 2 days ago

    Hi Ali.

    It seems some elements considerably differ from the design in terms of dimensions. That is fine, considering not having the design file.

    I found some good use with Power Toys on Windows.

    https://learn.microsoft.com/en-us/windows/powertoys/

    You have to install it first, though.

    It has a Screen Ruler which you can use to measure pixels on your screen. Pretty nifty tool for some use cases like this one.

    I hope this helps :)

    Best of Luck!

    0
  • Mariam Svanidze•80
    @mariamsvanidze0Submitted 3 days ago
    What are you most proud of, and what would you do differently next time?

    What I’m Most Proud Of I’m proud of creating a responsive layout with clean, functional design and smooth interactivity.

    What I Would Do Differently Next time, I’d focus more on optimizing performance and exploring more advanced animations for smoother user experiences.

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

    Challenges Encountered I struggled with maintaining the layout while adding spacing for the footer, which caused my card div to shift.

    How I Overcame Them I adjusted the body’s flexbox settings and used padding to ensure proper spacing without affecting the card div's position.

    Used Flexbox, CSS Grid, Media Queries, and hover effects.

    2
    Tomislav Šuto•60
    @RetroApePosted 3 days ago

    Hi Mariam. Nice work on matching the design; it is pretty close. I know what you mean with layout, but thankfully it will become easier to us with time.

    I checked your solution and found a couple of things to note:

    • the color of the title should change only when hovering with mouse over the title itself. Making two selectors on the title would solve the issue; one :hover (to change pointer to hand) and one :active (to change text color when clicking)
    • two @media queries are unnecessary; simply having everything properly set up in CSS file is enough for bigger screens, and then you can use @media query to change what needs to change for widths of 375px and under

    I hope I helped a bit. Best of Luck!

    Marked as helpful
    0
  • munylo14•20
    @munylo14Submitted 3 days ago
    What are you most proud of, and what would you do differently next time?

    This project was fairly straightforward. I utilized CSS to style a container to match the design file. I didn't incorporate any libraries or dependencies for this project. I did some reading on responsive design and managed to create a component that responds to the viewport size. However, I still don't feel very confident that I achieved this "correctly" and would appreciate any feedback.

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

    I had issues (I suspect it may have been a cache issue) getting the QR code image to display in my project. Although my image tag was formatted correctly, it still wasn't displaying on my live preview server. For no apparent reason, it started working. Then, when I deployed my project to Github Pages, same issue. And again, for no apparent reason, it now displays correctly.

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

    Based on the above stated issue, if you have any suggestions on what may have been causing the issue, please let me know. If there is something I should do differently, please let me know as well. I also welcome any and all feedback in relation to my adherence to convention when it comes to writing efficient, readable code.

    QR Code Component using Vanilla CSS

    2
    Tomislav Šuto•60
    @RetroApePosted 3 days ago

    Congratulations on completing the challenge :)

    I checked your code and it is very readable.

    Looking at the solution itself, I can see several things that differ from the design:

    • radius of QR image is too big; it should be border-radius: 10px;
    • text color is black; it should be:
      • .qr-header {color: #1F314F;} Slate-900
      • .qr-info {color: #68778D;} Slate-500
    • shadow is missing below the card:
      • box-shadow: #0000000D 0 25px 25px 0px;
    • it seems that the card is a bit too short

    Those are some of the things I have noticed. I hope it helps.

    Best of Luck!

    0