ik ben sinds kort bezig met html css en ben nu bezig met het bouwen van de mobiele versie van mijn site doormiddel van media queries. Echter loop ik tegen een probleem aan. als ik mijn site op crome op de mobiel bekijk is het lettertype veel groter dan op firefox op de mobiel. ik heb nog maar 1 media querie gebruikt de andere ben ik nog mee bezig. mijn site staat ook online op ahmedewerker.nl/test1234
hier mijn css code
hier mijn css code
Cascading Stylesheet:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
| ​body, html {color:#FFFFFF; font-family: 'Open Sans' !important; background-color:#007AFF; } a {font-family: 'Open Sans', sans-serif;} p {color:#FFFFFF; font-family: 'Open Sans', sans-serif;} a:hover {font-style:italic;} a:link {color:#FFFFFF;} A {text-decoration: none; color:#FFFFFF;} .navbar {overflow: hidden; position: fixed; top: 0; width: 100%; } .navbar a {float: right; display: block; color:#FFFFFF; text-align: center; padding: 14px 16px; text-decoration: none; font-size: 17px; } #wrapper {width:980px; margin:auto;} #header img {width:100%;} #header {Margin-top:270px;} #text {width:600px; padding-left:240px;} .afb11 {float:left; } .afstand {margin-left:185px; width:600px;} #go {clear:both;} #ganaar {border:thin #FFFFFF; height:610px; width:190px; padding-left:140px; ​ float:left; display:inline-block; } #ganaar2 {border:thin #FFFFFF; height:610px; width:190px; ​ float:left; display:inline-block; margin-left:80px;} #ganaar3 {border:thin #FFFFFF; height:610px; width:190px; ​ float:left; display:inline-block; margin-left:80px;} #ganaar {margin-top:90px;} #ganaar2 {margin-top:90px;} #ganaar3 {margin-top:90px;} .pijl {float:left; } .pijl p {font-size:27px;} .marginn {margin-left:37px; } .gri {font-size:14px; } #all {margin-right:140px; margin-top:56px;} #all p {clear:both; float: right; font-weight:bold;} h1 {font-size:19px;} h2 {font-size:19px; color:#FFFFFF;} h3 {font-size:19px; color:#FFFFFF; margin-bottom:0px;} h4 , h5 , h6, h7, h8, h9, h10, h11, h12 {font-size:18px; color:#FFFFFF; font-weight:bold; margin-bottom:0px; margin-top:0px;} /*mobiel staand groot/ ipad staand*/ @media screen and (orientation:portrait) and (min-width:750px) and (max-width:1090px){ p {font-size:20px;} a {font-size:20px;} #wrapper {width:780px;} #ganaar {padding-left:10px;} #header {Margin-top:10px;} h1 {font-size:23px;} h2 {font-size:23px; color:#FFFFFF;} h3 {font-size:23px; color:#FFFFFF; margin-bottom:0px;} h4 , h5 ,h6 , h7, h8, h9, h10, h11, h12 {font-size:23px;} #ganaar3 {display:none;} #text { width:680px; padding-left:10px;} } |
[Voor 0% gewijzigd door Creepy op 26-10-2018 14:37]