Kewaun• 10
@KewaunC
Submitted
I found it diffcult to use a media query for mobile since it didn't quite come out right from the desktop
I'm wonder if there was a shorter way to write it and just wondering whats a better way to make this project
Aayush Jha
@Aayush895
All comments
- Aayush Jha• 380
@Aayush895
Posted
The only suggestion that I can give you is to make your website responsive for all devices. Your website is working absolutely fine for mobile and desktop but I think you can make your website responsive to tablets as well. I mean to say that for tablets your component is looking a bit congested. You can always increase the width of your overall component for tablets. Other than that your website is great brother.
Marked as helpful
1 - zaram• 20
@blck-zed
Submitted
-i did not find anything to difficult while doing this, but please look at it and tell me on more areas i can improve. -the explanations on how to create a READme template is confusing too
Aayush Jha• 380@Aayush895
Posted
I think that your image is not loading properly. If I am not wrong then just doing this should be sufficient to load the image:
<img src="/image-qr-code.png" alt="an image of a qr code" />Hope this helps to correct the mistake. Happy Coding!
Marked as helpful
1 - Rares• 20
@raresmanta
Submitted
It was difficult for me to realize just how much I can do with CSS, since everything doesn't work well at first. It takes a bunch of little adjustments and trial and error until finding the solution. It was difficult to make the Compact Summary Card, with the circle in it, but I figured it out in the end. I also struggled a bit with ordering the elements of the Extended Summary, but again, I figured it out eventually.
I am unsure about the cleanse of my code, wether there are things I did which were unnecessary and only overcomplicated the process.
I would like to ask about centering everything in the page, I struggled with that, and only centered things artificially, using padding and margins. After a while flexbox didn't work. This is also why I didn't add the shadow, as it would have bordered the entire bottom of the screen. I also couldn't figure out how to center the text vertically in the pills in the Extended Summary section. Any advice regarding centering these specific bits would be wonderful.
Aayush Jha• 380@Aayush895
Posted
Brother the reason you weren't able to center your entire component using flex is because you haven't set the 'main' element to a height of 100vh. The reason why you have to set the height of the main element as 100vh is that the align-items:center property in flex center the element relative to the specified height of the parent element. This means your result-summary component will center itself vertically relative to whatever the height is for the main component. Second of all create a div inside which you put the section and the summary component together. So the code should look something like this: HTML portion:
<main> <div id="result-summary-component"> <section>...Code for this portion...</section> <div id="summary-component>...Code for this portion...</div> <div/> <main>CSS portion:
main { height: 100vh; display: flex; align-items: center; justify-content: center; }The above code should center your entire result component to the center of the screen. Another suggestion would be that try to make your component responsive for different devices using the media queries in CSS. Let me know if the above snippet helps or not. Happy Coding!
Marked as helpful
1 - Alex Mdz• 120
@AlexMdz5620
Submitted
Aayush Jha• 380@Aayush895
Posted
I am not an expert but am also learning about front-end web development so consider this only my opinion.
1.) My first opinion would be to increase the overall width of the component as it seems to be a bit congested and small. 2.) My second opinion would be to increase the padding a bit for the summary component from left and right. 3.) My final opinion would be to add a hover state to the continue button.
Marked as helpful
0
