Home
CSS
RWD Images
Tryit: Responsive image on responsive webpage
Run ❯
Get your
own
website
Result Size:
625 x 534
×
Change Orientation
Save Code
Change Theme, Dark/Light
Go to Spaces
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> * { margin: 0; box-sizing: border-box; } body { font-family: "Lucida Sans", sans-serif; } img { width: 100%; height: auto; } .grid-container { display: grid; grid-template-areas: 'header header header header header header' 'menu main main main main right' 'footer footer footer footer footer footer'; gap: 10px; background-color: white; padding: 10px; } .grid-container > div { padding: 10px; font-size: 16px; } .item1 { grid-area: header; background-color: purple; text-align: center; color: #ffffff; } .item1 > h1 { font-size: 40px; } .item2 { grid-area: menu; } .item2 ul { list-style-type: none; margin: 0; padding: 0; } .item2 li { padding: 8px; margin-bottom: 7px; background-color: #33b5e5; color: #ffffff; } .item2 li:hover { background-color: #0099cc; } .item3 { grid-area: main; } .item3 > h1 { font-size: 30px; margin-bottom: 7px; } .item3 > p { margin-bottom: 7px; } .item4 { grid-area: right; border: 2px solid #0099cc; background-color: white; padding: 15px; color: #000000; } .item4 > h2 { font-size: 20px; padding-bottom: 10px; } .item4 li { padding: 5px; margin-bottom: 5px; } .item5 { grid-area: footer; background-color: #0099cc; color: #ffffff; text-align: center; } @media only screen and (max-width: 600px) { .item1 {grid-area: 1 / span 6;} .item2 {grid-area: 2 / span 6;} .item3 {grid-area: 3 / span 6;} .item4 {grid-area: 4 / span 6;} .item5 {grid-area: 5 / span 6;} } @media only screen and (min-width: 600px) { .item1 {grid-area: 1 / span 6;} .item2 {grid-area: 2 / span 1;} .item3 {grid-area: 2 / span 4;} .item4 {grid-area: 3 / span 6;} .item5 {grid-area: 4 / span 6;} } @media only screen and (min-width: 768px) { .item1 {grid-area: 1 / span 6;} .item2 {grid-area: 2 / span 1;} .item3 {grid-area: 2 / span 4;} .item4 {grid-area: 2 / span 1;} .item5 {grid-area: 3 / span 6;} } </style> </head> <body> <div class="grid-container"> <div class="item1"><h1>Chania</h1></div> <div class="item2"> <ul> <li>The Flight</li> <li>The City</li> <li>The Island</li> <li>The Food</li> </ul> </div> <div class="item3"> <h1>The City</h1> <p>Chania is the capital of the Chania region on the island of Crete.</p> <p>The city can be divided in two parts, the old town and the modern city. The old town is situated next to the old harbour and is the matrix around which the whole urban area was developed.</p> <p>Chania lies along the north west coast of the island Crete.</p> <img src="img_chania.jpg" width="460" height="345"> </div> <div class="item4"> <h2>Facts:</h2> <ul> <li>Chania is a city on the island of Crete</li> <li>Crete is a Greek island in the Mediterranean Sea</li> </ul> </div> <div class="item5"><p>Resize the browser window to see how the content respond to the resizing.</p></div> </div> </body> </html>