Social Links Profile

Community feedback

• 

  Aamir Khan•130

  @AamnbabaPosted 3 months ago

  Excellent 👌

  0
• 

  M.A.B•80

  @MohamedAbdelBAQIMoPosted 3 months ago

  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:

  1. Use relative units and a flexible container

  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; }

  2. Use the clamp() function

  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.

  0
• 

  M.A.B•80

  @MohamedAbdelBAQIMoPosted 3 months ago

  exceelent work

  0