Skip to content

Commit d6a97fd

Browse files
cywong-devcywong-dev
committed
Change margin in css to follow the recommendation
- The footer is not centered - The footer and article content overlapped
1 parent f8f7b15 commit d6a97fd

2 files changed

Lines changed: 29 additions & 18 deletions

File tree

‎Wireframe/index.html‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -11,20 +11,20 @@
1111
<body>
1212

1313
<header>
14-
<h1>Webpage Explanation for Key Concept Questions</h1>
14+
<h4>Webpage Explanation for Key Concept Questions</h4>
1515
<nav>
1616
<ul>
17-
<li><a href="#readme">What is the purpose of a README file?</a></li>
18-
<li><a href="#wireframe">What is the purpose of a wireframe?</a></li>
19-
<li><a href="#git-branch">What is a branch in Git?</a></li>
17+
<li>What is the purpose of a README file?</li>
18+
<li>What is the purpose of a wireframe?</li>
19+
<li>What is a branch in Git?</li>
2020
</ul>
2121
</nav>
2222
</header>
2323

2424
<main>
2525
<article id="readme">
26-
<img src="readme.svg" alt="Illustration of a README markdown document" />
27-
<h2>What is the purpose of a README file?</h2>
26+
<img id="readme-image" src="readme.svg" alt="Illustration of a README markdown document" />
27+
<h3>What is the purpose of a README file?</h3>
2828
<p>
2929
A README file is the foundational documentation for a software, dataset, or coding project. It serves as a
3030
project's "front door," designed to help users quickly understand what the project does, how to install and use
@@ -36,8 +36,8 @@ <h2>What is the purpose of a README file?</h2>
3636
</article>
3737

3838
<article id="wireframe">
39-
<img src="wireframe.svg" alt="Illustration of a website user interface wireframe" />
40-
<h2>What is the purpose of a wireframe?</h2>
39+
<img id="wireframe-image" src="wireframe.svg" alt="Illustration of a website user interface wireframe" />
40+
<h3>What is the purpose of a wireframe?</h3>
4141
<p>Wireframes are the foundational blueprints of a website or app. Used early in the development process,
4242
they help teams visualize structure, map user flows, and establish content hierarchy before committing to costly
4343
colors, branding, or final UI design.
@@ -47,8 +47,8 @@ <h2>What is the purpose of a wireframe?</h2>
4747
</article>
4848

4949
<article id="git-branch">
50-
<img src="branch.svg" alt="Diagram showing Git branches diverging from a main commit history" />
51-
<h2>What is a branch in Git?</h2>
50+
<img id="git-image" src="branch.svg" alt="Diagram showing Git branches diverging from a main commit history" />
51+
<h3>What is a branch in Git?</h3>
5252
<p id="branch">A branch in Git is simply a lightweight movable pointer to one of these commits. The default branch
5353
name
5454
in Git is typically master or main.

‎Wireframe/style.css‎

Lines changed: 19 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -44,9 +44,11 @@ body {
4444
img,
4545
svg {
4646
width: 100%;
47-
object-fit: cover;
47+
height: 10vh;
48+
object-fit: fill;
4849
}
4950

51+
5052
/* ====== Site Layout ======
5153
Setting the overall rules for page regions
5254
https://www.w3.org/WAI/tutorials/page-structure/regions/
@@ -55,11 +57,12 @@ footer {
5557
position: fixed;
5658
bottom: 0;
5759
text-align: center;
58-
margin-bottom: calc(var(--space) * 2);
60+
transform: translateX(100%);
61+
margin-bottom: calc(var(--space));
5962
}
6063

6164
#branch {
62-
margin-bottom: calc(var(--space) * 4);
65+
margin-bottom: calc(var(--space) * 3);
6366
}
6467

6568
/* ====== Articles Grid Layout ====
@@ -71,9 +74,12 @@ https://gridbyexample.com/learn/
7174
*/
7275
main {
7376
max-width: var(--container);
74-
margin: 0 auto calc(var(--space) * 4) auto;
77+
margin: 0 auto calc(var(--space) * 1) auto;
7578
display: grid;
7679
grid-template-columns: 1fr 1fr;
80+
81+
grid-template-rows: auto 1fr;
82+
min-height: 80vh;
7783
gap: var(--space);
7884

7985
>*:first-child {
@@ -86,14 +92,15 @@ Setting the rules for how elements are placed in the article.
8692
Now laying out just the INSIDE of the repeated card/article design.
8793
Keeping things orderly and separate is the key to good, simple CSS.
8894
*/
89-
h1 {
95+
h4 {
9096
text-align: center;
9197
}
9298

99+
93100
ul {
94101
justify-content: center;
95102
display: flex;
96-
gap: var(--space)
103+
gap: calc(var(--space) * 2);
97104
}
98105

99106
article {
@@ -102,7 +109,7 @@ article {
102109
text-align: left;
103110
display: grid;
104111
grid-template-columns: var(--space) 1fr var(--space);
105-
margin-bottom: calc(var(--space) * 2);
112+
margin-bottom: calc(var(--space) * 1);
106113

107114
>* {
108115
grid-column: 2/3;
@@ -113,7 +120,7 @@ article {
113120
}
114121

115122

116-
h2 {
123+
h3 {
117124
text-align: left;
118125
vertical-align: top;
119126
}
@@ -123,4 +130,8 @@ article {
123130
max-width: fit-content;
124131
vertical-align: top;
125132
}
133+
134+
p {
135+
margin: 0;
136+
}
126137
}

0 commit comments

Comments
 (0)