This is the second time I've done this particular challenge and I found the JS part of it so much easier than it at first.
What challenges did you encounter, and how did you overcome them?I had an issue with getting the drawers image looking like it does in the design
What specific areas of your project would you like help with?I need help with getting the drawers image to look like it does in the design
Hello !, so I see your drawer image takes up always takes up almost half of the class called "article-preview". If you want to make the image smaller than the text part you can give the parent element the grid display and give the image lower "grid-template-column" percentage like the one below:
//give article-preview grid display .articel-preview{ display: grid; grid-template-columns: 40% 60%; //this will make the image width smaller than the text }
you can change the percentage however you like till you get the desired result! Hope this helps!
still need some work to make it completely responsive
What challenges did you encounter, and how did you overcome them?making it responsive to small screens was challenging.
What specific areas of your project would you like help with?how to make responsive
Hello👋
Good job on the project! I can see you have used media query on your class ".card" element. But you can just use the max-width property and get rid of the extra media queries like the one below.
.card{ width: "90%"; max-width: "600px"; /other properties .../ }
/* this property will allow the card class to have a 600px width if the width of the browser is greater than 600px and will become 90% in size when the browser is less than 600px" */
