I need help understanding how to make this card and it's contents shrink for the smallest mobile view (120px) - without using media queries. (Or clarification on if that is the goal of the challenge)
A great question!
To make the card and its contents shrink for the smallest mobile view (120px) without using media queries, you can use a combination of CSS techniques. Here are a few approaches:
Set the card's width and height to relative units like % or vw/vh (viewport width/height). Then, use a flexible container like a div with display: flex and flex-wrap: wrap to wrap the contents. This way, the card will automatically shrink as the viewport size decreases.
Example: .card { width: 80vw; /* 80% of viewport width / height: 50vh; / 50% of viewport height */ display: flex; flex-wrap: wrap; justify-content: center; align-items: center; }
The clamp() function allows you to set a minimum and maximum value for a property, and it will automatically adjust the value based on the viewport size. You can use it to set a minimum width and height for the card, and it will shrink accordingly.
Example: .card { width: clamp(120px, 80vw, 300px); /* min: 120px, max: 300px, flexible: 80vw / height: clamp(100px, 50vh, 200px); / min: 100px, max: 200px, flexible: 50vh */ } 3. Use CSS Grid
CSS Grid allows you to create a flexible grid system that adapts to different viewport sizes. You can define a grid container with a flexible width and height, and the card will automatically shrink as the viewport size decreases.
Example: .card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); grid-template-rows: repeat(auto-fill, minmax(100px, 1fr)); gap: 10px; }
.card { grid-column: 1 / -1; grid-row: 1 / -1; } These are just a few examples of how you can make a card and its contents shrink for the smallest mobile view without using media queries. You can experiment with different techniques to find the one that works best for your specific use case.
I need help understanding how to make this card and it's contents shrink for the smallest mobile view (120px) - without using media queries. (Or clarification on if that is the goal of the challenge)
Visit Site to See this isnt real
Excellent Work ,but How you add the photo like this ?
