CSS Width

Two cards with the same text can behave very differently on a phone. One card shrinks to fit the 375-pixel screen. The other keeps its width, runs past the right edge, and makes the whole page scroll sideways by 235 pixels. The difference is one property, width, and the kind of value you give it.

Here is the product card from the previous lesson, with no width set.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Product card</title>
  <style>
    .card {

.....

Like the course? Get enrolled and start learning!

Reading Progress

Vote for new content