Skip to content

Commit 3d95534

Browse files
fix: improvements from recording 9.3.2025
1 parent 7a882d6 commit 3d95534

File tree

2 files changed

+30
-30
lines changed

2 files changed

+30
-30
lines changed

README.md

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -2944,54 +2944,54 @@ A fluid grid layout adjusts its column widths and spacing proportionally based o
29442944

29452945
```css
29462946
.container {
2947-
background-color: #ff0000;
2948-
width: 90%; /* Set container width to 90% of the viewport */
2949-
margin: 0 auto; /* Center the container */
2947+
background-color: #ff0000;
2948+
width: 90%; /* Set container width to 90% of the viewport */
2949+
margin: 0 auto; /* Center the container */
29502950
}
29512951

29522952
.column {
2953-
background-color: #f1f1f1;
2954-
float: left;
2955-
width: 30%; /* Set column width to 30% of the container */
2956-
margin-right: 5%; /* Add 5% margin between columns */
2953+
background-color: #f1f1f1;
2954+
float: left;
2955+
width: 30%; /* Set column width to 30% of the container */
2956+
margin-right: 3.33%; /* Add 5% margin between columns */
29572957
}
29582958

29592959
/* Apply clearfix to clear floats */
29602960
.container:after {
2961-
content: "";
2962-
display: table;
2963-
clear: both;
2961+
content: "";
2962+
display: table;
2963+
clear: both;
29642964
}
29652965
```
29662966

29672967
[![Edit 072-Fluid Grids](images/codesandbox.svg)](https://codesandbox.io/p/sandbox/072-fluid-grids-qxh5zz)
29682968

29692969
[^72]CodeSandbox: Fluid Grids.
29702970

2971-
[^72]:[CodeSandbox: Fluid Grids](https://qxh5zz.csb.app/), last access: June 20, 2024.
2971+
[^72]:[CodeSandbox: Fluid Grids](https://qxh5zz.csb.app/), last access: March 9, 2025.
29722972

29732973
###### Media Queries
29742974

29752975
Media queries allow you to apply specific styles based on the characteristics of the viewport, such as its width or orientation. This enables you to create responsive designs that adapt to different screen sizes.
29762976

29772977
```css
29782978
.column {
2979-
background-color: #f1f1f1;
2979+
background-color: #f1f1f1;
29802980
}
29812981

29822982
/* Apply styles for screens larger than 768px */
29832983
@media screen and (min-width: 768px) {
2984-
.column {
2985-
width: 45%; /* Adjust column width for larger screens */
2986-
}
2984+
.column {
2985+
width: 45%; /* Adjust column width for larger screens */
2986+
}
29872987
}
29882988
```
29892989

29902990
[![Edit 073-Media Queries](images/codesandbox.svg)](https://codesandbox.io/p/sandbox/073-media-queries-dwprjz)
29912991

29922992
[^73]CodeSandbox: Media Queries.
29932993

2994-
[^73]:[CodeSandbox: Media Queries](https://dwprjz.csb.app/), last access: June 20, 2024.
2994+
[^73]:[CodeSandbox: Media Queries](https://dwprjz.csb.app/), last access: March 9, 2025.
29952995

29962996
##### Flexible Units
29972997

__presentation-slides/index.html

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1850,23 +1850,23 @@ <h1 id="heading">JavaScript Example</h1>
18501850

18511851
```css[|1|5|1,5|3|4|7|12|7,12|10|11|14-19]
18521852
.container {
1853-
background-color: #ff0000;
1854-
width: 90%; /* Set container width to 90% of the viewport */
1855-
margin: 0 auto; /* Center the container */
1853+
background-color: #ff0000;
1854+
width: 90%; /* Set container width to 90% of the viewport */
1855+
margin: 0 auto; /* Center the container */
18561856
}
18571857

18581858
.column {
1859-
background-color: #f1f1f1;
1860-
float: left;
1861-
width: 30%; /* Set column width to 30% of the container */
1862-
margin-right: 5%; /* Add 5% margin between columns */
1859+
background-color: #f1f1f1;
1860+
float: left;
1861+
width: 30%; /* Set column width to 30% of the container */
1862+
margin-right: 3.33%; /* Add 5% margin between columns */
18631863
}
18641864

18651865
/* Apply clearfix to clear floats */
18661866
.container:after {
1867-
content: "";
1868-
display: table;
1869-
clear: both;
1867+
content: "";
1868+
display: table;
1869+
clear: both;
18701870
}
18711871
```
18721872

@@ -1880,14 +1880,14 @@ <h1 id="heading">JavaScript Example</h1>
18801880

18811881
```css[|5|6|10|6,10|7-9]
18821882
.column {
1883-
background-color: #f1f1f1;
1883+
background-color: #f1f1f1;
18841884
}
18851885

18861886
/* Apply styles for screens larger than 768px */
18871887
@media screen and (min-width: 768px) {
1888-
.column {
1889-
width: 45%; /* Adjust column width for larger screens */
1890-
}
1888+
.column {
1889+
width: 45%; /* Adjust column width for larger screens */
1890+
}
18911891
}
18921892
```
18931893

0 commit comments

Comments
 (0)