I am a bit confused regarding some sections of my code, firstly I'm unsure why I need to use "display: flex" in multiple places in order to centre the card component. For example in the body section I use display flex and then on the div "flex-container" I also have to specify display:flex or the card component isn't centered.
I also need help with responsiveness, I feel like this should not been as hard as I found it to make this responsive given the layout of the card I thought changing the flex direction to column would do 90% of the work but I spent alot of time with the dev tools open in chrome trying to resize components to make it look decent.
if anyone has any advice or pointers on an easier way to make this responsive that would be great!
Responsiveness - if anyone has any pointers or can share some advice on what I should be thinking/doing when trying to make the webpage responsive
How the layout turned out. Individually working with each grid to achieve the desired result. Knowing how the grid layout affects the page individually
What challenges did you encounter, and how did you overcome them?Autofit in the display grid tutorial and working with it.
What specific areas of your project would you like help with?autofit in the grid layout and how it works without alot of customization
Hey, this is great work!
The only thing I would add is to make the body flex and using justify-content and align-items to make the grid centered.
Used grid successfully
What challenges did you encounter, and how did you overcome them?Figuring out the desktop design using grid. Got help from the community. Some one had the same issue. I hadn't need to ask it. Just looked up the answer. And solved!!
What specific areas of your project would you like help with?Predicting the behavior prior to coding grid seems very difficult to me. Any suggestion regarding the practice of predicting the behavior of grid layout is welcomed.
Nice solution!
Here is a great website that discusses Grid and provides a lot of good tips and advice on how to use grid : https://css-tricks.com/snippets/css/complete-guide-grid/
I was able to work on my media queries, and I used ChatGPT less than in previous projects. This project required 4 hours of work.
What challenges did you encounter, and how did you overcome them?Change the image based on screen size and properly size the images within the boxes. Work on the :active and :hover states in the correct dimensions. I used internet research for assistance.
What specific areas of your project would you like help with?I want to better understand how to properly integrate an image according to different formats; it’s not yet clear to me, and I often find the solution by chance. I'm not yet efficient with my work time and would like to know if I could be faster and how to achieve that, as well as work on the efficiency of properties. Feedback from the community on different image formats would be greatly appreciated. Thank you, everyone.
Hey, this is a great attempt!
You can use the <picture> tag in html and you can set different images based on the size like so :
<picture> <source srcset="photo1.jpg" media="(min-width: 900px) /> <source srcset="photo2.jpg" media="(max-width: 600px) /> <img src="photo.jpg" alt="photo" /> </picture>If the media is at least 900 px then photo1 will be displayed, if the media is at most 600px then photo2 is displayed.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture
This is a great attempt, one thing I noticed though it looks as though the wrong font style was used for the title.
In the style guide the font is listed as Young Serif whereas you have used "Outfit".
Apart from that its a really good attempt!
Hey @nikhilka2305.
This solution looks great!
Just one little thing I noticed is the card is not in the center, one way you could achieve this is by using flexbox like this :
.flex-container{
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
}
I was able to implement the box-shadow CSS property and i feel very happy about that.
Hey, super nice try!
