What are you most proud of, and what would you do differently next time?
I am proud that I manage to create my own solution without relying on the help of others.
What challenges did you encounter, and how did you overcome them?
I find the button part where the share icons will pop up quite a bit challenging especially in the mobile area. I spend a bunch of time figuring it out. I overcame it because I am persistence.
What specific areas of your project would you like help with?
Hi @MiksDev04,
Nice use of css position properties. The persistence was worth it.
The outcome it's quite good, as the animations are on the right place and also work well.
Keep up the good work!
What are you most proud of, and what would you do differently next time?
Im proud that I finally know how to set the grid layout.
What challenges did you encounter, and how did you overcome them?
Sometimes the section is out from the grid. So, I need to set the width of container using rem unit. Also, It is hard to be precise on the section's padding and size.
What specific areas of your project would you like help with?
Hi @imandreans,
Nice coding! Really efective and easy to understand.
I believe that through the use of max-width (and also max-height) property you'll be able to achieve what you intended.
Just try next time building the project with a mobile-first approach. I think this way it you'll be easier to understand how this css properties can be useful.
Regarding the section's padding and size, I wouldn't worry much about that, as your final outcome was really similar to the challenge's solution.
What are you most proud of, and what would you do differently next time?
I'm proud to make the card responsive to both mobile view and desktop view
What challenges did you encounter, and how did you overcome them?
I had a problem on changing the image on desktop preview in the @media and i overcome it by using content: url()
What specific areas of your project would you like help with?
I would like help on squeezing the header to make it align exactly as in design, i tried using right padding but didn't work.
I would like help on removing the scroll bar on mobile preview, i tried to set the height of body to fit content but didn't work
Hi @Jackson-zablon15,
Not sure if this may help, but try giving on the @media ccs part, 50% width to both "image" and <section>.
This way both parts will only ocupy half of the container <main>, and I think you can then use padding as were you were trying to, on the <section> part.
Concerning the scroll bar, you can use the following on the body element:
body ::-webkit-scrollbar { display: none; }
Nice use of html elements in order to achieve semantic structure as well as to manage responsiveness through CSS.
Also, good use of CSS variables. It makes it simpler to use the given colors on the style.css file.
Good solution!
Nice solution in my opinion, as it doesn't differ much from the design.
It was a good way to use CCS flexbox, through the main and article HTML elements.
Also, the HTML code is well structured and easily readable.
Concerning the range of screen sizes, unfortunately I'm struggling on that too and therefore can't give much of a feedback.
