voespinal-code
@voespinal-codeAll comments
- @zanfa97Submitted 3 months ago@voespinal-codePosted 3 months ago
Does the solution include semantic HTML? Yeah
Does the design look good on different screen sizes? Yes, it adapts very well to different screens
Is the code well structured, readable and reusable? of course
Does the solution differ significantly from the design? No. The design looks very good, I will definitely take some notes to implement in my designs and improve its structure. well done bro.
1 - @VincinChristmasSubmitted 3 months agoWhat are you most proud of, and what would you do differently next time?
It was easier to understand most of the design styles and requirements for this project because it is my second one. I didn't understand the 'active states' requirements though. I just took a wild guess and added hover to some elements.
I really need to understand responsiveness though. I am still not sure when to use media queries. I will review this concept in my own time.
What challenges did you encounter, and how did you overcome them?Not so many challenges, except when I didn't pay attention to my screen zoom settings. I thought I had some css problems but I checked and say my screen was zoomed out to about 75%.
What specific areas of your project would you like help with?Responsiveness and media queries
@voespinal-codePosted 3 months agohey hello, I like your design and the way you have organized your HTML. Regarding Responsiveness and media queries you only need small adjustments. With Flexbox you can quickly center your design right in the middle of the page.
you have a div called whitebox, you have to apply the media to that div. @media(max-width:375px){ .whitebox{ width: 300px; } } With this you tell it that when the screen is smaller than the indicated pixels, the size of your div will change to 300px
Marked as helpful0 - @RiccardoWilliamSubmitted 3 months agoWhat specific areas of your project would you like help with?
Responsiveness and general well-made layout
@voespinal-codePosted 3 months agoHello Brother how are you? I was checking your code, if you want it to be responsive, you don't need to add display flex in all <div>, you just need to define display flex in your parent container.
So once you have a <div> with an image element inside, you just need to style your image element, you can say.
img{ width:90%;} and then add the margin you want this would add responsiveness to your image inside the container and you will be able to fit any content.
0