Skip to content
OverviewSolutions
8
Comments
9
Gerald LeCour
@Gerald-LeCour

All comments

  • Gerald LeCour•170
    @Gerald-LeCourPosted over 1 year ago

    Hey there 👋 your solution and code looks great!

    If you want to get rid of the accessibility reports do this:

    1. Change your div with the class of frame into a main element.
    2. Change your div with the class of “text boldText” into an h1 element.

    I hope this was helpful! 😊

    Marked as helpful
    1
  • Orlando Verdin•330
    @OrlilandSubmitted over 1 year ago
    What are you most proud of, and what would you do differently next time?

    .

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

    .

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

    .

    QR Code Component

    1
    Gerald LeCour•170
    @Gerald-LeCourPosted over 1 year ago

    Wow, nice solution! 🎉

    The only thing I would do is use a main element instead of the aside element.

    Other than that your solution is great! 😊

    0
  • Umer Khokhar•220
    @Umer-KhokharSubmitted over 1 year ago

    My solution is quit near to the design. Only one thing is confusing me that the svg icons used in designs are showing when I preview it with live server, but on github it is not showing. Can anyone tell me about this?. If yes, than please!

    Results Summary Component

    1
    Gerald LeCour•170
    @Gerald-LeCourPosted over 1 year ago

    Hey there! 👋

    To get the icon images on your site you need to add the assets folder that came with the package you downloaded in your repository.

    I hope that helped you out! 😊

    Marked as helpful
    0
  • Gerald LeCour•170
    @Gerald-LeCourPosted over 1 year ago

    Hey there! 👋 Your solution looks great!

    Here is some things I would recommend:

    1. I would remove the body styles completely
    2. Instead of using pixles to size the main element, I would change the height and width to:
     min-height: 100vh;
 width: 100%;

    3.Next I would use flex box to center everything, add this to your "main" element styles:

    display: flex;
justify-content: center;
align-items: center;

    I hope this was helpful for you! 😊

    Marked as helpful
    0
  • Gerald LeCour•170
    @Gerald-LeCourPosted over 1 year ago

    Hey there 👋 awesome solution!

    If you would like to get rid of the accessibility reports you can do this:

    1. change your div with the class of "container" into a "main" element.
    2. Instead of using an "h3" you should change that into an "h1", because it is always best to start off from h1, then to h2, h3 ...etc.

    I hope this got rid of those reports! 👍

    0
  • Gerald LeCour•170
    @Gerald-LeCourPosted over 1 year ago

    Hey there!👋

    Here are some things I would change:

    1. I would remove the (margin: 15vh auto;) from your div.container (look at step 3 to see how to center it again)
    2. I would git rid of these styles from the div.summary and put them in your div.container:
    border-radius: 20px;
and box-shadow: var(--Dark-gray-blue) 5px 10px 30px 0.1px;)

    3.Here is some code that I made to center your div.container:

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

    Hopefully this might have helped you! 👍

    0
  • Gerald LeCour•170
    @Gerald-LeCourPosted over 1 year ago

    Hey there👋 nice solution!

    If you would like to get rid of the accessibilty and html reports do this:

    1. change your div with the class of "container" into a main element
    2. change your p with the class of "destaque" into an h1 element

    Other than that I think your code looks fine!

    Hopefully this helped get rid of those reports! 👍

    Marked as helpful
    0
  • Kevin Calderwood•60
    @Kcalde20Submitted over 1 year ago

    Q1: Keeping border radiuses in-sync

    While I typically just eye-ball border radiuses when there is a container with one and another close element inside (in this case an image). Though I'd imagine theres some ratio that could be set in order to keep the inner radius in proportion to the out radius. Has anyone ran into a good way to factor this in? I was thinking just use a calc for the inner radius.

    Q2: Extra space at the bottom of the card

    I couldn't figure out what was dictating the extra padding at the end of the card in the mockups. I ended up adding a padding-block-end to make it match the style but it's unsatisfying and likely won't as nice with other lengths of content. Is there something from the design I'm missing?

    QR Code Component

    1
    Gerald LeCour•170
    @Gerald-LeCourPosted over 1 year ago

    Hello! 👋

    I had the same question you asked in your first question, and I found out that if you set the qr image' border radius to (border-radius: inherit;) it will proportion its border-radius to its parents border-radius and to me this seems more efficient than guessing which I was doing as well.

    Hope this helped! 👊

    0
  • Todaymore•460
    @TodaymoreSubmitted over 1 year ago

    Hi Everyone, I am new here, I am just curious about how you guys who are better than me in Front End Development find suitable size for any image? For example, In this QR code challenge, we have to give some value to Width and Height of the QR code, so how to find correct or more accurate size?

    Basic HTML and CSS

    3
    Gerald LeCour•170
    @Gerald-LeCourPosted over 1 year ago

    Hey there! I was wondering this question too, I think that if you get the premium version of Frontend Mentor, then they will give you all the exact widths and heights of everything. Hope that answerd your question! :)

    0