a554f489 by Jeremy Groot

fix to mobile

1 parent f88b2696
...@@ -99,6 +99,9 @@ body.login { ...@@ -99,6 +99,9 @@ body.login {
99 left:0; 99 left:0;
100 top:200px; 100 top:200px;
101 } 101 }
102 #login {
103 padding:10% 0 0;
104 }
102 } 105 }
103 106
104 107
...@@ -220,6 +223,14 @@ label { ...@@ -220,6 +223,14 @@ label {
220 width: 300px; 223 width: 300px;
221 } 224 }
222 225
226 @media(max-width: 700px) {
227 #user_pass,
228 #user_login,
229 #user_email {
230 width:250px;
231 }
232 }
233
223 .login #login_error, 234 .login #login_error,
224 .login .message, 235 .login .message,
225 .login .success { 236 .login .success {
...@@ -259,11 +270,11 @@ label { ...@@ -259,11 +270,11 @@ label {
259 270
260 271
261 272
262 @media (max-width: 1000px) { 273 @media (max-width: 1100px) {
263 274
264 #login form { 275 #login form {
265 width: 35%; 276 width: 35%;
266 margin-left: 23%; 277 margin-left: 15%;
267 padding: 60px 100px 100px 140px; 278 padding: 60px 100px 100px 140px;
268 } 279 }
269 280
...@@ -279,15 +290,46 @@ label { ...@@ -279,15 +290,46 @@ label {
279 290
280 } 291 }
281 292
293 #login h1 {
294 margin-left:15%;
295 }
296
282 297
283 } 298 }
284 299
285 @media (max-width: 800px) { 300 @media (max-width: 1000px) {
301 #login h1 {
302 margin-left:23%;
303 }
304 }
305
306 @media (max-width: 900px) {
307
308 #backtoblog {
309 top:150px;
310 }
286 311
287 #login form { 312 #login form {
288 margin-top: 18%; 313 margin-top: 18%;
289 width: 40%; 314 width: 40%;
290 } 315 }
316 #login h1 {
317 margin-left:23%;
318 margin-top:20%;
319 }
320 }
321
322 @media (max-width: 800px) {
323 #login h1 {
324 margin-top:0;
325 }
326 }
327
328 @media (max-width: 700px) {
329 #backtoblog {
330 top:120px;
331 }
332
291 } 333 }
292 334
293 @media (max-width: 600px) { 335 @media (max-width: 600px) {
...@@ -300,14 +342,16 @@ label { ...@@ -300,14 +342,16 @@ label {
300 342
301 343
302 #login { 344 #login {
303 background: url(../images/logo-white-5.png) 70px 10px no-repeat !important; 345 background: url(../images/logo-white-5.png) 15px 15px no-repeat !important;
304 padding-top: 40%; 346 padding-top: 40%;
305 width: 100%; 347 width: 100%;
306 padding: 8% 0 0; 348 padding: 40px 0 0;
307 margin: auto; 349 margin: auto;
308 background-size: 132px 72px !important; 350 background-size: 132px 72px !important;
309 351
310 352
353
354
311 } 355 }
312 356
313 body.login { 357 body.login {
...@@ -331,10 +375,7 @@ label { ...@@ -331,10 +375,7 @@ label {
331 margin: auto; 375 margin: auto;
332 margin-top: -70px; 376 margin-top: -70px;
333 background-color: transparent; 377 background-color: transparent;
334 padding: 0px 100px 100px 240px; 378 padding: 0;
335 margin-left: -30%;
336
337
338 } 379 }
339 380
340 381
...@@ -357,17 +398,15 @@ label { ...@@ -357,17 +398,15 @@ label {
357 } 398 }
358 399
359 #login h1 { 400 #login h1 {
401 width:auto;
360 position: absolute; 402 position: absolute;
361 top:130px; 403 top:120px;
362 width:100%; 404 white-space: nowrap;
363 } 405 }
364 406
365 #login h1 span {
366 left:45px;
367 }
368 407
369 #login form { 408 #login form {
370 width: 100%; 409 width: auto;
371 min-height: 250px; 410 min-height: 250px;
372 display: block; 411 display: block;
373 -moz-border-radius: 0px; 412 -moz-border-radius: 0px;
...@@ -379,9 +418,8 @@ label { ...@@ -379,9 +418,8 @@ label {
379 box-shadow: none; 418 box-shadow: none;
380 border-radius: 0px; 419 border-radius: 0px;
381 border: none; 420 border: none;
382 padding: 60px 100px 100px 240px; 421 padding: 0;
383 margin-left: -34%; 422 margin-left: 0;
384 margin-top: 22%;
385 /* background: url(../images/login.png) 0px 0px no-repeat; */ 423 /* background: url(../images/login.png) 0px 0px no-repeat; */
386 /* background-size: 672px 398px !important; */ 424 /* background-size: 672px 398px !important; */
387 /* background-position: top; */ 425 /* background-position: top; */
...@@ -393,8 +431,33 @@ label { ...@@ -393,8 +431,33 @@ label {
393 } 431 }
394 432
395 433
434 #login h1 span {
435 left:0;
436 top:20px;
437 }
438
439 #loginform {
440 padding:15% !important;
441 margin-top:80px !important;
442 }
443
444 h1 {
445 margin-left:15% !important;
446 width:100%;
396 447
448 }
397 449
450 label {
451 margin-left:0 !important;
452 }
453
454 #backtoblog {
455
456 left:auto;
457 right:0;
458 top:0;
459
460 }
398 461
399 462
400 463
...@@ -402,8 +465,7 @@ label { ...@@ -402,8 +465,7 @@ label {
402 465
403 @media (max-width: 420px) { 466 @media (max-width: 420px) {
404 #login form { 467 #login form {
405 width: 140%; 468 width: 100%;
406 margin-left: -55%;
407 background-size: 872px 398px !important; 469 background-size: 872px 398px !important;
408 } 470 }
409 471
...@@ -414,7 +476,6 @@ label { ...@@ -414,7 +476,6 @@ label {
414 } 476 }
415 477
416 .login #nav { 478 .login #nav {
417 margin-left: -55%;
418 479
419 } 480 }
420 481
...@@ -436,7 +497,7 @@ label { ...@@ -436,7 +497,7 @@ label {
436 @media (max-width: 380px) { 497 @media (max-width: 380px) {
437 #login form { 498 #login form {
438 width: 140%; 499 width: 140%;
439 margin-left: -65%; 500 margin-left:0;
440 background-size: 872px 398px !important; 501 background-size: 872px 398px !important;
441 } 502 }
442 503
...@@ -447,12 +508,10 @@ label { ...@@ -447,12 +508,10 @@ label {
447 } 508 }
448 509
449 .login #nav { 510 .login #nav {
450 margin-left: -65%;
451
452 } 511 }
453 512
454 #backtoblog { 513 #backtoblog {
455 top: -10px; 514 top: 30px;
456 left: unset; 515 left: unset;
457 right: 0; 516 right: 0;
458 517
......