Do you notice any errors in my solution?
Gerald LeCour
@Gerald-LeCourAll comments
- @kaesleSubmitted over 1 year ago@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:
- Change your div with the class of frame into a main element.
- Change your div with the class of βtext boldTextβ into an h1 element.
I hope this was helpful! π
Marked as helpful1 - @OrlilandSubmitted over 1 year agoWhat 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?.
@Gerald-LeCourPosted over 1 year agoWow, 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-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!
@Gerald-LeCourPosted over 1 year agoHey 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 helpful0 - @DFerreir4Submitted over 1 year ago
All feedback is welcome! Especially on mobile responsivenes work.
@Gerald-LeCourPosted over 1 year agoHey there! π Your solution looks great!
Here is some things I would recommend:
- I would remove the body styles completely
- 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 helpful0 - @MdShafiqulSaymonSubmitted over 1 year ago
Give me some Feed Back . And Some Advice to Improve myself.
@Gerald-LeCourPosted over 1 year agoHey there π awesome solution!
If you would like to get rid of the accessibility reports you can do this:
- change your div with the class of "container" into a "main" element.
- 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 - @sumanth-chandanaSubmitted over 1 year ago
Happy to receive your feedback. I really appreciate any help you can provide.
@Gerald-LeCourPosted over 1 year agoHey there!π
Here are some things I would change:
- I would remove the (margin: 15vh auto;) from your div.container (look at step 3 to see how to center it again)
- 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 - @G-uilhermeFSubmitted over 1 year ago
How can I improve my CSS code, in terms of the dimensions of each div and container?
@Gerald-LeCourPosted over 1 year agoHey thereπ nice solution!
If you would like to get rid of the accessibilty and html reports do this:
- change your div with the class of "container" into a main element
- 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 helpful0 - @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?
@Gerald-LeCourPosted over 1 year agoHello! π
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 - @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?
@Gerald-LeCourPosted over 1 year agoHey 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