उदाहरण
CSS से रिस्पॉन्सिव कॉलम कार्ड बनाने के लिए, निम्न कोड का उपयोग करें:
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style> body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } * { box-sizing: border-box; } .card { color: white; float: left; width: calc(25% - 20px); padding: 10px; border-radius: 10px; margin: 10px; height: 200px; } .card p { font-size: 18px; } .cardContainer:after { content: ""; display: table; clear: both; } @media screen and (max-width: 600px) { .card { width: 100%; } } </style> </head> <body> <h1>Responsive column card Example</h1> <h2>Resize the screen to see the below cards resize themselves</h2> <div class="cardContainer"> <div class="card" style="background-color:rgb(153, 29, 224);"> <h2>First card</h2> <p>Some text</p> </div> <div class="card" style="background-color:rgb(12, 126, 120);"> <h2>Second card</h2> <p>Some text</p> </div> <div class="card" style="background-color:rgb(207, 41, 91);"> <h2>Third card</h2> <p>Some text</p> </div> <div class="card" style="background-color:rgb(204, 91, 39);"> <h2>Fourth card</h2> <p>Some text</p> </div> </div> </body> </html>
आउटपुट
उपरोक्त कोड निम्न आउटपुट उत्पन्न करेगा:
स्क्रीन को 600px या उससे कम रिसाइज़ करने पर:
