Doubt in Assignment

#1

In the assignment, it was told to reduce the margins around the cards when we make the window smaller. I am stuck at that and unable to achieve that. I tried media queries but its not working.

#2

@bratnick can you share what you have tried, attach the screenshots and share the code here.

#3

I have deployed it here for now

#4

https://thirsty-darwin-a113d0.netlify.app/

#5

https://github.com/bratnick/css-2 , this is the code

#6

@bratnick what is not working in here, can you state the desired and current state and difference between them so that I can help you with that.

#7

When I decrease the width of the page manually, the items realign from 4 items per row to 3 items per row to 2 items per row, but the space between the leftmost item and window should also decrease which is not happening. Same goes for the rightmost element and the window.

#8

@bratnick try using min-width along with max-width to provide a range in media query. This might solve your problem.

#9

I used max-width before, it wasn’t solving the issue

#10

@bratnick I can see the shape shifting as per the media queries, Still can’t understand what else are you trying to achieve, can you send me the desired effect or send me the timestamp from the video where you were asked to do the same