I am most proud of the fact i successfully completed this challenge
What challenges did you encounter, and how did you overcome them?I think my major challenge has been on responsiveness
What specific areas of your project would you like help with?please all the areas you'd find out in the codes that needs improvement, i'd definitely improve
It looks like the page handles transitions well between mobile and desktop viewing. The image placement and resizing is responsive, and gets the job done well.
The text, however, needs some work.
One thing that you should avoid is the use of px measurements. You can never tell what a person's screen resolution will be, so you always want to use relative units, so that the browser can decide what the exact sizes should be.
As such, you might want to try converting your px measurements to em measurements. This allows the display to be adjustable based on the size of the screen.
I was able to do this without any challenges.
What challenges did you encounter, and how did you overcome them?None
What specific areas of your project would you like help with?None
First, it looks like the inter-button spacing is a little small; if you were to increase the margins and the padding a little, the buttons should be a little bigger, and a little further apart, and the whole box should be taller, making it closer to the design screenshot size.
I also noticed a scrollbar on the window. This normally happens when using 100vh without also applying margin: 0; to the body section. This is because the page size is exactly the entire height of the screen, plus the default extra margin (which adds extra space outside the body), which is what is causing the scrollbars.
I hope this helps!
I would go for a cleaner CSS since once again I ended up using too many properties on all my selectors. I feel like the padding and margin properties could have been reduced to a single line or a couple of them, so I'll try to fix that.
What challenges did you encounter, and how did you overcome them?I was not really sure how to make the page responsive for mobile layouts without using media queries.
What specific areas of your project would you like help with?Making the layout responsive to shrink the container in size when browsing on mobile devices without media queries. Also, I'm under the impression that images don't show on the live site, so I'm not sure if I'm doing something wrong when calling the src on my index.html.
One thing that might help would be to alter the .card-container element so that it has a maximum width of around 360 pixels. This will allow the project to fit the requirements, and leave a little room around the sides for the shadow and the background. From there, you can then adjust the font and image sizes to make the content of the container line up similar to how it looks in the screenshots.
Every little project helps me to start and learn something new, this one in particular I felt was simple, it's more than anything to improve the responsive part.
What challenges did you encounter, and how did you overcome them?The biggest challenge would be the responsive part, I think I handled the structure well.
What specific areas of your project would you like help with?Everything related to responsive, a great area of opportunity.
It still jumps in size, now at 501→500 pixels. Is there a reason for the @media element? Maybe I'm missing something.
Every little project helps me to start and learn something new, this one in particular I felt was simple, it's more than anything to improve the responsive part.
What challenges did you encounter, and how did you overcome them?The biggest challenge would be the responsive part, I think I handled the structure well.
What specific areas of your project would you like help with?Everything related to responsive, a great area of opportunity.
I have to admit, I did not know about the :root and the * elements, so it looks like I learned something here. Thanks!
There is the use of @media I'm not sure of, however. The same size box should also fit the minimum size of 375×667 and still have a little margin to work with. Once the browser passes 650 pixels across, it seems like the box grows.
While it might work for small buttons that need a significant increase for smaller screens, the increase in this case isn't really significant enough to make a difference in perception or interaction. If you can adjust the attribution line to equally fit under the box under all sizes, you should be able to drop the @media element altogether, and be fine.
