@OyasikellySubmitted over 2 years ago
What should I do concerning the responsiveness of the project? I having quite a difficulty when it comes to the grid and media queries. What do you suggest?
Tamuno_preye
@TamunopreyeAll comments
- @TamunopreyePosted over 2 years ago
Well you should try reading the guide that comes with the project when you download it. It gives you the colors and images to use in the project, remember the goal is to make it look like the main project itself. It's a way to help you better your designing.
Now concerning the responsiveness of your project if you find it difficult to do maybe you should start with mobilefirst responsive design and what do i mean?? i mean you should first design it to look straight in this manner you can use either grid or flexbox like this. first set your body to a min-height: 100vh; card { max-width: 500px; display: flex; flex-direction: column; align-items: center; justify-content: center; } or you can use the grid layout card { display: grid; grid-template-columns: 1fr; } then for desktop first design you can just use the below code i hope it helps tho... i'm also learning i might be wrong too....
card { max-width: 700px //or any amount you want display: grid; gird-template-columns: repeat(2, 1fr) //meaning make it a 2 column layout or grid-template-columns: repeat(2, minmax("auto-fill", 1fr) //which will make it also responsive } or using flexbox display: flex; //by default it will turn to a column layout of howmany amount of containers you have in the card card { display: flex; flex-direction: row; flex-wrap: wrap //this will wrap your element if the width isnt 100% }
Marked as helpful0
