Skip to content

Commit 279dfeb

Browse files
PatrickZenderPatrickZender
committed
Added mobile-compatibility
1 parent 1057389 commit 279dfeb

7 files changed

+264
-18
lines changed

‎allaboutme.html

+36-3
Original file line numberDiff line numberDiff line change
@@ -147,7 +147,7 @@
147147
color: white;
148148
}
149149

150-
/*--- Default CSS Above /\ --- */
150+
151151
#image {
152152
margin: 1em;
153153
display: flex;
@@ -159,8 +159,41 @@
159159
width: 450px;
160160
}
161161

162-
163-
162+
/* Mobile Compatibility */
163+
@media (max-width: 770px) {
164+
p {
165+
font-size: 1em;
166+
text-indent: 2%;
167+
}
168+
h1 {
169+
font-size: 2em;
170+
}
171+
.navbar a {
172+
font-size: 1em;
173+
padding: 5px 5px;
174+
margin: 0.5em;
175+
}
176+
#logo {
177+
height: 60px;
178+
width: 175px;
179+
margin: 0.5em;
180+
}
181+
img {
182+
height: 200px;
183+
width: 200px;
184+
}
185+
.bottomlinks a {
186+
font-size: 1em;
187+
padding: 5px 5px;
188+
margin: 0.5em;
189+
}
190+
#copyright {
191+
font-size: 1em;
192+
}
193+
.social-section a {
194+
font-size: 1em;
195+
}
196+
}
164197
</style>
165198
</head>
166199
<body>

‎book.html

+21-1
Original file line numberDiff line numberDiff line change
@@ -124,7 +124,7 @@
124124
color: white;
125125
}
126126

127-
/*--- Default CSS Above /\ --- */
127+
128128

129129
.booking-form {
130130
display: flex;
@@ -153,6 +153,26 @@
153153
background-color: #2d545e;
154154
}
155155

156+
/* Mobile Compatibility */
157+
@media (max-width: 770px) {
158+
159+
#logo {
160+
height: 60px;
161+
width: 150px;
162+
}
163+
164+
.navbar a {
165+
font-size: 1em;
166+
padding: 5px 5px;
167+
margin: 0.5em;
168+
}
169+
170+
.bottomlinks a {
171+
font-size: 1em;
172+
padding: 5px 5px;
173+
margin: 0.5em;
174+
}
175+
}
156176
</style>
157177
</head>
158178

‎faqs.html

+45-3
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
<!DOCTYPE html>
22
<html lang="en">
33
<head>
4-
<link rel="icon" href="favicon.ico" type="image/x-icon" />
54
<link rel="icon" href="favicon.ico" type="image/x-icon" />
65
<meta charset="UTF-8" />
76
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
@@ -125,7 +124,7 @@
125124
color: white;
126125
}
127126

128-
/*--- Default CSS Above /\ --- */
127+
129128
input[type="text"] {
130129
box-sizing: border-box;
131130
padding: 30px 30px;
@@ -183,7 +182,7 @@
183182
display: flex;
184183
}
185184

186-
/* Create two equal columns that sits next to each other */
185+
/* To make columns sit next to each other */
187186
.column {
188187
flex: 50%;
189188
padding: 10px;
@@ -198,6 +197,49 @@
198197
height: 400px;
199198
width: 500px;
200199
}
200+
201+
/* Mobile Compatibility */
202+
@media (max-width: 770px) {
203+
.row {
204+
flex-direction: column;
205+
}
206+
.column {
207+
flex: 100%;
208+
}
209+
.navbar a, .bottomlinks a {
210+
font-size: 1em;
211+
padding: 5px 5px;
212+
margin: 0.5em;
213+
}
214+
#logo {
215+
height: 70px;
216+
width: 200px;
217+
}
218+
img {
219+
height: 250px;
220+
width: 300px;
221+
}
222+
h1, p, h3 {
223+
font-size: 1em;
224+
}
225+
input[type="text"] {
226+
font-size: 1em;
227+
padding: 15px 15px;
228+
}
229+
#submit {
230+
font-size: 1em;
231+
padding: 5px 5px;
232+
margin-top: 1em;
233+
margin-bottom: 2em;
234+
}
235+
#subject, #selectionbubbles {
236+
font-size: 1em;
237+
padding: 2px 2px;
238+
}
239+
textarea {
240+
font-size: 1em;
241+
}
242+
}
201243
</style>
202244
</head>
203245
<body>

‎index.html

+29-1
Original file line numberDiff line numberDiff line change
@@ -132,7 +132,8 @@
132132
text-decoration: none;
133133
color: white;
134134
}
135-
/*--- Default CSS Above /\ --- */
135+
136+
136137
#image {
137138
margin: 1em;
138139
display: flex;
@@ -167,6 +168,33 @@
167168
display: inline-block;
168169
}
169170

171+
/* Mobile Compatibility */
172+
@media (max-width: 770px) {
173+
h1 {
174+
font-size: 2em;
175+
}
176+
177+
p {
178+
font-size: 1em;
179+
}
180+
181+
.navbar a {
182+
font-size: 1em;
183+
padding: 8px 8px;
184+
margin: 0.5em;
185+
}
186+
187+
.bottomlinks a {
188+
font-size: 1em;
189+
padding: 8px 8px;
190+
margin: 0.5em;
191+
}
192+
193+
img {
194+
height: 300px;
195+
width: 400px;
196+
}
197+
}
170198
</style>
171199
</head>
172200
<body>

‎services.html

+52-1
Original file line numberDiff line numberDiff line change
@@ -124,7 +124,7 @@
124124
color: white;
125125
}
126126

127-
/*--- Default CSS Above /\ --- */
127+
128128
#video {
129129
margin: 1em;
130130
display: flex;
@@ -146,6 +146,57 @@
146146
width: auto;
147147
color: #12343b;
148148
}
149+
150+
/* Mobile Compatibility */
151+
@media (max-width: 770px) {
152+
body {
153+
margin: 0;
154+
}
155+
156+
.navbar {
157+
display: flex;
158+
flex-direction: column;
159+
align-items: center;
160+
}
161+
162+
.navbar a {
163+
font-size: 1em;
164+
padding: 5px 5px;
165+
margin: 0.5em;
166+
}
167+
168+
.bottomlinks {
169+
display: flex;
170+
flex-direction: column;
171+
align-items: center;
172+
}
173+
174+
.bottomlinks a {
175+
font-size: 1em;
176+
padding: 5px 5px;
177+
margin: 0.5em;
178+
}
179+
180+
#logo {
181+
height: 60px;
182+
width: 170px;
183+
margin: 0.5em;
184+
}
185+
186+
h1, h2 {
187+
font-size: 1.5em;
188+
}
189+
190+
p, ol {
191+
font-size: 1em;
192+
text-indent: 0;
193+
}
194+
195+
#video iframe {
196+
width: 100%;
197+
height: auto;
198+
}
199+
}
149200
</style>
150201
</head>
151202
<body>

‎sitemap.html

+44-1
Original file line numberDiff line numberDiff line change
@@ -124,7 +124,6 @@
124124
color: white;
125125
}
126126

127-
/*--- Default CSS Above /\ --- */
128127

129128
#linkslist {
130129
text-indent: 30px;
@@ -135,6 +134,50 @@
135134
width: auto;
136135
color: #12343b;
137136
}
137+
138+
@media (max-width: 770px) {
139+
body {
140+
margin: 0;
141+
}
142+
143+
.navbar {
144+
font-size: 1em;
145+
}
146+
147+
.navbar a {
148+
padding: 8px 8px;
149+
margin: 0.5em;
150+
}
151+
152+
.bottomlinks {
153+
font-size: 1em;
154+
}
155+
156+
.bottomlinks a {
157+
padding: 8px 8px;
158+
margin: 0.5em;
159+
}
160+
161+
#logo {
162+
height: 60px;
163+
width: 170px;
164+
margin: 0.5em;
165+
}
166+
167+
h1 {
168+
font-size: 2.5em;
169+
}
170+
171+
p {
172+
font-size: 1em;
173+
text-indent: 1.5%;
174+
}
175+
176+
#linkslist {
177+
font-size: 1em;
178+
text-indent: 1.5%;
179+
}
180+
}
138181
</style>
139182
</head>
140183
<body>

0 commit comments

Comments
 (0)