kolommen onder elkaar op mobile device

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Alje Woldering

Alje Woldering

17/01/2025 13:32:37
Quote Anchor link
ik heb een pagina met 6 kolommen gemaakt met daarin woorden. Als ik deze inspecteer voor devices kleiner dan 768 px dan worden deze kolommen onder elkaar weergegeven. Dit is ook de bedoeling.
Zodra ik echter een van deze woorden voorzie van een link dan werkt dit niet meer. in de code zie je bij boerenzwaluw een woord zonder link, daarboven zijn de woorden voorzien van een link. hieronder de Css style
en html. Wie weet hier een oplossing voor?


Code (php)
PHP script in nieuw venster Selecteer het PHP script
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
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
    <title>Vogelalfabet</title>
    <meta name="Vogelfoto's A tot en met Z" content="width=device-width, initial-scale=1.0">
    <style>
* {
box-sizing: border-box;
}
.row::after {
content: "";
clear: both;
display: block;
}
      a:link {
  text-decoration: none;
}
/* unvisited link */
a:link {
  color: white;
}

/* visited link */
a:visited {
  color: white;
}
a:visited {
  text-decoration: none;
}    
[class*="col-"] {
float: left;
padding: 15px;
}
html {
font-family: "Lucida Sans", sans-serif;
}
.header {
background-color: #666666;
color: #ffffff;
padding: 15px;
}
.menu ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.menu li {
padding: 8px;
margin-bottom: 7px;
background-color: #666666;
color: #ffffff;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.menu li:hover {
background-color: #0099cc;
}
.aside {
background-color: #666666;
padding: 15px;
color: #ffffff;
text-align: center;
font-size: 14px;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.footer {
background-color: #666666;
color: #ffffff;
text-align: center;
font-size: 12px;
padding: 15px;
}
/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 16.66%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
@media only screen and (max-width: 768px) {
/* For mobile phones: */
[class*="col-"] {
width: 100%;
  }
}
}
  </style>
  </head>
  <body style="    background-color: #999999;"> <br>
    <div class="header">
      <h2 style="background-color: rgb(102, 102, 102); text-align: center;"><span

          style="font-family: Gentium Book Basic;">Houjesnavel</span></h2>
    </div>
    <div class="row">
      <div class="col-3">
        <div style="text-align: center;">
          <p><span style="color: #e0e0e0;">A </span></p>
        </div>
        <p> </p>
        <div style="text-align: center;">
          <p><a href="Aalscholver/Aalscholver.html" title="Aalscholver"><span style="color: #e0e0e0;">Aalscholver</span></a></p>
        </div>
        <p> </p>
        <div style="text-align: center;">
          <p><a href="Alk/Alk.html" title="Alk"><span style="color: #e0e0e0;">Alk</span></a></p>
        </div>
        <p> </p>
        <div style="text-align: center;">
          <p><a href="Appelvink/Appelvink.html" title="Appelvink"><span style="color: #e0e0e0;">Appelvink</span></a></p>
        </div>
        <p> </p>
        <p> </p>
        <div style="text-align: center;">
          <p><span style="color: #e0e0e0;">B</span></p>
        </div>
        <p> </p>
        <div style="text-align: center;">
          <p><a href="Bergeend/Bergeend.html" title="Bergeend"><span style="color: #e0e0e0;">Bergeend</span></a></p>
        </div>
        <p> </p>
        <div style="text-align: center;">
          <p><a href="Blauwborst/Blauwborst.html"><span style="color: #e0e0e0;">Blauwborst</span></a></p>
        </div>
        <p> </p>
        <div style="text-align: center;">
          <p><a href="file:///D:/Nieuwe%20website/Alle%20bestanden/Website2025/Blauwe%20kiekendief/Blauwe%20kiekendief.html"><span

                style="color: #e0e0e0;">Blauwe kiekendief</span></a></p>
        </div>
        <p> </p>
        <div style="text-align: center;">
          <p><a href="Blauwe%20kiekendief/Blauwe%20kiekendief.html"><span style="color: #e0e0e0;">Blauwe
                reiger</span></a></p>
        </div>
        <p> </p>
        <div style="text-align: center;">
          <p><span style="color: #e0e0e0;">Boerenzwaluw</span></p>


Toevoeging op 17/01/2025 14:09:17:

Mijn fout; ik had niet alleen links toegevoegd maar ook de meta name gewijzigd; was viewport en dat moet natuurlijk blijven staan zo weet ik nu. Ik weet even niet hoe ik dit topic kan verwijderen.
Gewijzigd op 18/01/2025 10:56:46 door - Ariën -
 
PHP hulp

PHP hulp

15/02/2025 10:44:14
 
Adoptive Solution

Adoptive Solution

17/01/2025 14:21:55
Quote Anchor link
Deze link zal ook niet werken :

file:///D:/Nieuwe%20website/Alle%20bestanden/Website2025/Blauwe%20kiekendief/Blauwe%20kiekendief.html
 
- Ariën  -
Beheerder

- Ariën -

17/01/2025 18:48:22
Quote Anchor link
Heb je een voorbeeld die we kunnen bekijken?
Misschien via JSfiddle bijvoorbeeld?
 
Alje Woldering

Alje Woldering

17/01/2025 20:54:30
Quote Anchor link
hallo,

ik had vanmiddag al een reactie bij het bericht geplaatst namelijk: in de meta name had ik 'viewport' verwijderd. Dom maar dat was de oorzaak. De link heb ik inmiddels aangepast en die werkt nu. Bedankt voor jullie reacties.
 
- Ariën  -
Beheerder

- Ariën -

18/01/2025 10:57:51
Quote Anchor link
Ik zie het! je was je code-tag vergeten af te sluiten, en dus viel je bericht nog in je code-blok, wat ik over het hoofd zag.
Fijn dat het opgelost is. Het topic wordt overigens niet verwijderd omdat het forum ook een kennisbank is.
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.