Skip to content

Commit eb81069

Browse files
YunaAnnYunaAnn
committed
Minor fixes, responsiveness
1 parent d8552a2 commit eb81069

2 files changed

Lines changed: 45 additions & 15 deletions

File tree

‎css/main.css‎

Lines changed: 31 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,12 @@ strong
4747

4848
.col-4, .col-8, .col-12
4949
{
50-
margin: 1.5rem 0 1.5rem 0;
50+
margin-top: 1.5rem;
51+
}
52+
53+
.row
54+
{
55+
margin-bottom:2rem;
5156
}
5257

5358
.white-container h1
@@ -91,3 +96,28 @@ strong
9196
.contact a:hover { color: #fff; }
9297
.contact i { font-size:50px; }
9398
.contact h4 { margin-bottom: 1.5rem;}
99+
100+
/*-----------------------------------------*/
101+
@media only screen and (max-width: 1200px)
102+
{
103+
[class*="col-"]
104+
{
105+
width: 100%;
106+
}
107+
108+
.jumbotron *
109+
{
110+
width: 100%;
111+
}
112+
113+
.btn
114+
{
115+
width: 100%;
116+
}
117+
118+
.contact *
119+
{
120+
padding: 0 0 1rem 0;
121+
}
122+
123+
}

‎index.html‎

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -29,15 +29,15 @@ <h1 class="display-4"> JavaScript Algorithms </h1>
2929
<div class="algorithms">
3030

3131
<div class="row">
32-
<div class="col-4">
32+
<div class="col-sm-4">
3333
<div class="example">
3434
<h1 class="display-4"> Reverse String </h1>
3535
<h3 class="lead"> EXAMPLE </h3>
3636
<h6> cat -> tac </h6>
3737
<h6> lovely -> ylevol </h6>
3838
</div>
3939
<div class="row">
40-
<div class="col-8">
40+
<div class="col-12">
4141
<input class="form-control form-control-lg" type="text" id="reverseString" name="reverseString">
4242
</div>
4343
</div>
@@ -46,15 +46,15 @@ <h6> lovely -> ylevol </h6>
4646
<strong id="reverseStringResult"> ------------ </strong>
4747
</div>
4848

49-
<div class="col-4">
49+
<div class="col-sm-4">
5050
<div class="example">
5151
<h1 class="display-4"> Alphabetize String </h1>
5252
<h3 class="lead"> EXAMPLE </h3>
5353
<h6> cat -> act </h6>
5454
<h6> rain -> ainr </h6>
5555
</div>
5656
<div class="row">
57-
<div class="col-8">
57+
<div class="col-12">
5858
<input class="form-control form-control-lg" type="text" id="alphabetizeString" name="alphabetizeString">
5959
</div>
6060
</div>
@@ -63,7 +63,7 @@ <h6> rain -> ainr </h6>
6363
<strong id="alphabetizeStringResult"> ------------ </strong>
6464
</div>
6565

66-
<div class="col-4">
66+
<div class="col-sm-4">
6767
<div class="example">
6868
<h1 class="display-4"> Repeat String </h1>
6969
<h3 class="lead"> EXAMPLE </h3>
@@ -86,23 +86,23 @@ <h6> rain, 4' -> rainrainrainrain </h6>
8686
</div>
8787

8888
<div class="row">
89-
<div class="col-4">
89+
<div class="col-sm-4">
9090
<div class="example">
9191
<h1 class="display-4"> Name Swap </h1>
9292
<h3 class="lead"> EXAMPLE </h3>
9393
<h6> Doe Jane -> Jane Doe </h6>
9494
<h6> Nowak Jan -> Jan Nowak </h6>
9595
</div>
9696
<div class="row">
97-
<div class="col-8">
97+
<div class="col-12">
9898
<input class="form-control form-control-lg" type="text" id="nameSwap" name="nameSwap">
9999
</div>
100100
</div>
101101
<button id="btn-space" onclick="nameSwap()" class="btn btn-outline-info btn-lg"> Swap! </button>
102102
<p class="lead"> RESULT </p>
103103
<strong id="swapNameResult"> ------------ </strong>
104104
</div>
105-
<div class="col-8">
105+
<div class="col-sm-8">
106106
<div class="example">
107107
<h1 class="display-4"> Palindrome </h1>
108108
<h3 class="lead"> EXAMPLE PALIDROMES </h3>
@@ -121,15 +121,15 @@ <h6> Do geese see God? </h6>
121121
</div>
122122

123123
<div class="row">
124-
<div class="col-4">
124+
<div class="col-sm-4">
125125
<div class="example">
126126
<h1 class="display-4"> Find the Longest String </h1>
127127
<h3 class="lead"> EXAMPLE </h3>
128128
<h6> 1. Hello, what's up? -> Hello </h6>
129129
<h6> 2. I like trains :3 -> trains </h6>
130130
</div>
131131
<div class="row">
132-
<div class="col-8">
132+
<div class="col-12">
133133
<input class="form-control form-control-lg" type="text" id="findTheLongestStringInput" name="findTheLongestStringInput">
134134
</div>
135135
</div>
@@ -138,15 +138,15 @@ <h6> 2. I like trains :3 -> trains </h6>
138138
<strong id="findTheLongestStringResult"> ------------ </strong>
139139
</div>
140140

141-
<div class="col-4">
141+
<div class="col-sm-4">
142142
<div class="example">
143143
<h1 class="display-4"> Find the Largest Value </h1>
144144
<h3 class="lead"> EXAMPLE </h3>
145145
<h6> 1. 1,3,10,4,6,7,8 -> 10 </h6>
146146
<h6> 2. 302,17,35,66,100,1 -> 302 </h6>
147147
</div>
148148
<div class="row">
149-
<div class="col-8">
149+
<div class="col-12">
150150
<input class="form-control form-control-lg" type="text" id="findTheLargestElementInput" name="findTheLargestElementInput">
151151
</div>
152152
</div>
@@ -155,15 +155,15 @@ <h6> 2. 302,17,35,66,100,1 -> 302 </h6>
155155
<strong id="findTheLargestElementResult"> ------------ </strong>
156156
</div>
157157

158-
<div class="col-4">
158+
<div class="col-sm-4">
159159
<div class="example">
160160
<h1 class="display-4"> Find the Smallest Value </h1>
161161
<h3 class="lead"> EXAMPLE </h3>
162162
<h6> 1. 1,3,10,4,6,7,8 -> 1 </h6>
163163
<h6> 2. 302,17,35,66,100,1 -> 1 </h6>
164164
</div>
165165
<div class="row">
166-
<div class="col-8">
166+
<div class="col-12">
167167
<input class="form-control form-control-lg" type="text" id="findTheSmallestElementInput" name="findTheSmallestElementInput">
168168
</div>
169169
</div>

0 commit comments

Comments
 (0)