Skip to content

Commit 444413e

Browse files
RakibRahmanRakibRahman
committed
Percentages vs Fixed widths
1 parent 91f43c2 commit 444413e

File tree

2 files changed

+124
-0
lines changed

2 files changed

+124
-0
lines changed

‎CSS-Media-Queries/Percentages-vs-Fixed-widths/Percentages_vs_Fixed_widths.html

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Percentages vs Fixed widths</title>
7+
<style>
8+
* {
9+
box-sizing: border-box;
10+
}
11+
.parent {
12+
background: turquoise;
13+
padding: 50px;
14+
width: 900px;
15+
/* Fixed Width is not responsive */
16+
}
17+
.parent2 {
18+
background: turquoise;
19+
padding: 50px;
20+
width: 80%;
21+
/* % is responsive */
22+
}
23+
.child {
24+
background: tomato;
25+
height: 250px;
26+
}
27+
/* Challenge 1 */
28+
</style>
29+
</head>
30+
<body>
31+
<h1>Fixed Width</h1>
32+
<div class="parent">
33+
<div class="child"></div>
34+
</div>
35+
<hr />
36+
<h1>% Width</h1>
37+
38+
<div class="parent2">
39+
<div class="child"></div>
40+
</div>
41+
<hr />
42+
</body>
43+
</html>

‎CSS-Media-Queries/Percentages-vs-Fixed-widths/challenge-1-crl.html

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Conquering Responsive Layouts: Challenge 1</title>
7+
<style>
8+
/* INSTRUCTIONS
9+
*
10+
* 1) Limit the total width of
11+
* the .intro-content to about half
12+
* of it's parent
13+
*
14+
* 2) Stop the text from overflowing
15+
* out the bottom at small screen
16+
* widths
17+
*
18+
* You may modify the HTML if needed
19+
*
20+
*/
21+
22+
* {
23+
box-sizing: border-box;
24+
}
25+
26+
body {
27+
margin: 0;
28+
font-family: sans-serif;
29+
}
30+
h1 {
31+
text-align: center;
32+
}
33+
.container {
34+
background: #23424a;
35+
color: white;
36+
37+
width: 80%;
38+
margin: 0 auto;
39+
40+
padding: 2em;
41+
/* height: 300px; */
42+
}
43+
.intro-content {
44+
width: 50%;
45+
}
46+
</style>
47+
</head>
48+
<body>
49+
<h1>Conquering Responsive Layouts: Challenge 1</h1>
50+
51+
<div class="container">
52+
<div class="intro-content">
53+
<h1>Lorem ipsum dolor sit.</h1>
54+
<p>
55+
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quod unde
56+
rerum, deleniti ea obcaecati sint hic odit dicta tenetur qui ut
57+
dolorum provident sit, atque, reprehenderit nulla voluptate! Officiis,
58+
consectetur?
59+
</p>
60+
<p>
61+
Iste ipsa enim delectus porro, ullam repellendus maiores quis rem
62+
debitis cum, necessitatibus architecto dolor? Velit, ad quaerat
63+
blanditiis veritatis expedita totam vel voluptatem officiis officia ab
64+
modi voluptatibus obcaecati.
65+
</p>
66+
<p>
67+
Accusantium minima iusto nobis fuga hic explicabo unde illum,
68+
perferendis et animi aperiam quaerat, eaque deleniti alias blanditiis
69+
exercitationem commodi repudiandae ullam consequatur incidunt
70+
reiciendis repellat officia laboriosam. Esse, modi.
71+
</p>
72+
<p>
73+
Expedita cupiditate iure odit, delectus placeat optio magnam assumenda
74+
mollitia aspernatur at saepe nisi commodi natus excepturi voluptate.
75+
Recusandae nisi dolorem, necessitatibus optio aliquam repellat.
76+
Adipisci, incidunt. Consequuntur, natus nulla.
77+
</p>
78+
</div>
79+
</div>
80+
</body>
81+
</html>

0 commit comments

Comments
 (0)