Grid werkt niet meer

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Back end developer PHP, Laravel

Functie Jij komt te werken in ons webdevelopment team, wat bestaat uit 8 ervaren collega’s. Hiernaast hebben wij nog een team van 2 ontwikkelaars die aan native applicaties werken. Bij ons zijn er korte lijntjes en er hangt een gezellige informele werksfeer. Maar het belangrijkste is natuurlijk dat je aan geweldige applicaties zult gaan werken! Wij willen als organisatie niet te groot worden, we willen gewoon toffe dingen maken. Onze techstack bestaat momenteel uit: PHP, Laravel, Javascript, Typescript, Git, MySQL, Java, Kotlin, Xamarin. Samen met ons ga jij zorgen dat we puik werk leveren! Waarbij je bij elke fase in

Bekijk vacature »

C# developer

Sogeti is een organisatie met een goede werksfeer en zo min mogelijk hiërarchische verhoudingen. Ga je bij ons als C# Developer aan de slag? Dan werk je dagelijks met collega’s aan de mooiste IT-projecten. Deze snelgroeiende groep collega’s krijgt energie van hun vak en dat merk je op de werkvloer. Natuurlijk krijg jij de mogelijkheid je te certificeren. We organiseren regelmatig technische Meet-ups en doen we veel aan kennisdeling. Mede hierdoor zij wij dit jaar Microsoft Partner of the Year geworden. Sogetisten staan klaar voor elkaar, hebben lol met elkaar en daarmee behalen we de mooiste resultaten! Werken bij Sogeti

Bekijk vacature »

Full stack developer Python, React

Functie Jij als full stack developer komt binnen onze Technology afdeling te werken. Deze bestaat momenteel uit 15 man. De stack waarmee wij werken is voornamelijk Python, Javascript, React en GraphQL. Binnen deze afdeling wordt er met multidisciplinaire teams gewerkt aan verschillende projecten. Projecten duren vaak langer dan 3 maanden en je bent van begin tot eind vaak betrokken. Naast dat je als full stack ontwikkelaar aan de slag gaat ben je ook Consultant. Dit betekent dat je ook klantcontact hebt in je rol en werkshops geeft. De verhouding tussen deze werkzaamheden zijn ongeveer 70% development en 30% consultancy. Een

Bekijk vacature »

Oracle APEX developer

Wat je gaat doen: Als Oracle APEX ontwikkelaar bij DPA werk je samen met collega’s aan de meest interessante opdrachten. Je zult je ervaring met SQL, PL/SQL, JavaScript, HTML en CSS inzetten om wensen van opdrachtgevers te vertalen naar technische oplossingen. Je werk is heel afwisselend, omdat DPA zich niet beperkt tot een specifieke branche. Zo ben je de ene keer bezig binnen de zorgsector, de andere keer is dit bij de overheid. Wat we vragen: Klinkt goed? Voor deze functie breng je het volgende mee: Je hebt een hbo- of universitaire opleiding afgerond Je hebt 2 tot 5 jaar

Bekijk vacature »

Fullstack of back-end PHP developer

Functie Ieder onderdeel van de software draait op aparte servers en het bestaat dus echt uit verschillende componenten. Het team bestaat uit 4 developers, een klein team dus met korte lijnen. Alles in intern ontwikkeld en je werkt aan alle facetten. Van uitbreiding van de core tot maatwerk voor de klant. Ook liggen er verschillende uitdagingen op servervlak en databases. Je zult de eerste periode veel samenwerken met de lead developer om vervolgens echt je gang te gaan binnen de software. In het team streven ze naast de hoogst haalbare kwaliteit. Hiervoor werken ze nauw met elkaar samen en levert

Bekijk vacature »

Full Stack Developer

Dit ga je doen Ontwikkelen van Product Informatie Management (PIM) systemen; Werken aan zowel grotere als kleine projecten voor toonaangevende klanten binnen o.a. de retail; Verantwoordelijk voor de front-end werkzaamheden; Naast de front-end werk je ook aan de backend. Hier ga je werken Als Full Stack Developer komt je te werken binnen een vooruitstrevende organisatie die Product Informatie Management (PIM) systemen levert aan hun klanten. Hun klanten zijn toonaangevende bedrijven binnen o.a. de retail. De organisatie zit gevestigd in regio Zwolle en bestaat uit zo'n 35 medewerkers, waarvan 30 IT. Je komt te werken binnen één van de zelfsturende development

Bekijk vacature »

Full stack Developer / .NET / Angular / Azure

Dit ga je doen Jij gaat je als Full Stack .NET Developer voornamelijk bezighouden met: Het vertalen van concepten naar passende innovatieve en duurzame oplossingen; Het ontwikkelen van bedrijf kritische en gebruiksvriendelijke applicaties voor de internationale markt en intern gebruik; Bouwen aan software om het Internet of Things netwerk te ondersteunen; Het maken en onderhouden van interfaces tussen systemen aan de hand van API's; Het onderhouden en blijven verbeteren van de ontwikkelde software. Hier ga je werken Binnen deze organisatie zal jij als Full Stack .NET Developer een belangrijke rol krijgen en ga je dagelijks de uitdaging aan om maatwerk

Bekijk vacature »

PHP Developer

Functie omschrijving Als PHP Developer ga jij aan de slag met uitdagende software projecten. Jij gaat in deze functie software applicaties ontwikkelen. Deze software projecten zijn heel divers, en deze organisatie maakt software, van A tot Z. Klanten kunnen in elke sector werkzaam zijn, van profit tot non-profit. Deze software bouw je vooral in PHP en specifiek Laravel. Dit framework kent dus geen geheimen voor jou. De software die jij gaat ontwikkelen is heel divers, van urenregistratiesystemen tot compleet geautomatiseerde tools. In deze veelzijdige functie ga jij je zeker niet vervelen, elke dag bestaat weer uit nieuwe uitdagingen. Bedrijfsprofiel Deze

Bekijk vacature »

Informeel bureau zoekt Senior PHP developer

Functie Als senior PHP developer neem je het voortouw in ontwikkeltrajecten en ben je in staat werk uit te leggen aan collega’s om zo je kennis met hen te delen. Je deinst niet terug voor ingewikkelde projecten. Deze zie jij alleen maar als uit uitdaging. Je werkt doorlopend aan klantcases (en hierdoor je klant echt leert kennen), maar toch ben je afwisselend bezig. Dit alles in een vrije en ontspannen werksfeer, met een team van gelijkgestemde. Binnen de development teams werken ze met o.a. PHP, Laravel, React, Node, Elastic, Amazon AWS, JIRA, Solid, Domain-driven-design, Doctrine, Redis, docker, Kubernetes, CI, PHP

Bekijk vacature »

Web Developer

Bedrijfsomschrijving ENGIE Nederland is onderdeel van de beursgenoteerde ENGIE Groep. ENGIE is actief in 70 landen, met wereldwijd 150.000 medewerkers. Als groep is het de missie om bij te dragen aan de verduurzaming van de wereld. ENGIE Energie biedt energiediensten aan particulieren en grootzakelijk en gaat de uitdagingen van de energietransitie aan door het beschikbaar maken van duurzame energie, het streven de klimaatverandering tot een minimum te beperken, leveringszekerheid te bieden en zorg te dragen voor een verantwoord gebruik van de beschikbare resources. ENGIE Energie investeert daarom in hernieuwbare energiebronnen zoals zon, wind en bio-gas. Functieomschrijving Heb jij veel ervaring

Bekijk vacature »

Full Stack PHP Developer

Functieomschrijving Ervaren PHP Developer gezocht! Wij zijn op zoek naar een ervaren PHP Developer die het IT team van een organisatie in de regio Ermelo gaat versterken. Voor deze functie zijn we op zoek naar een enthousiaste en breed georiënteerde IT-er die deze innovatieve organisatie nog een stap verder gaat brengen. Wij zijn op zoek naar iemand die communicatief goed is en die zelfstandig problemen op kan lossen. Je bent verantwoordelijk voor het samenwerken met een externe partij het is hierbij jouw taak om deze partij uit te dagen op het geleverde werk. Het schrijven van concepten aan de AI

Bekijk vacature »

Java Developer

Java/Kotlin Developer Ben jij een ervaren Java/Kotlin developer met een passie voor het automatiseren van bedrijfsprocessen? Wil je graag deelnemen aan uitdagende projecten bij aansprekende klanten? En ben je op zoek naar een professioneel, ambitieus en dynamisch bedrijf om je carrière verder te ontwikkelen? Kom dan ons team bij Ritense in Amsterdam versterken! Zo ziet de functie eruit: Als Java/Kotlin developer bij Ritense ben je verantwoordelijk voor de ontwikkeling en implementatie van applicaties die bedrijfsprocessen automatiseren, zodat onze klanten slimmer, efficiënter en klantgerichter kunnen werken. Als developer ben je in de lead en zorg je voor de correcte oplevering van

Bekijk vacature »

Traineeship Full Stack .NET Developer

Dit ga je doen Start op 7 augustus 2023 bij de Experis Academy en ontwikkel jezelf tot een gewilde Full Stack .NET Developer. Maar hoe ziet het traineeship eruit en wat kun je verwachten? Periode 1 De eerste 3 maanden volg je fulltime, vanuit huis, een op maat gemaakte training in teamverband. Je leert belangrijke theorie en krijgt kennis van de benodigde vaardigheden en competenties die nodig zijn om de IT-arbeidsmarkt te betreden. Zowel zelfstandig als in teamverband voer je praktijkopdrachten op het gebied van front- en backend development uit. Wat er per week op het programma staat kun je

Bekijk vacature »

.Net Front-end Ontwikkelaar

Wij zoeken een .Net Front-end Ontwikkelaar! Omschrijving Kun jij snel schakelen en ben je stressbestendig? Dan zoeken wij jou! Als .Net Front-end Ontwikkelaar help je mee aan de webapplicatie die over de hele wereld door allerlei bedrijven wordt gebruikt. Je werkt daarnaast mee aan nieuwe en verbeterde functionaliteiten en helpt met het oplossen van bugs. Over de opdrachtgever Je komt te werken in een ambitieus team dat zich blijft ontwikkelen. Dit is alle informatie die we nu kunnen delen over de werkplek. Als jij de .Net Front-end Ontwikkelaar bent voor deze job, vertellen we je snel nóg meer. Eisen Heb

Bekijk vacature »

Junior Fullstack Developer

Functie omschrijving Heb jij je universitair diploma Informatica afgerond en ben jij op zoek naar een startersfunctie waar jouw ontwikkeling in een hoog vaandel staat? Voor een softwarebedrijf in Amsterdam zijn wij op zoek naar een Junior Fullstack Developer. Je begint met een op maat gemaakte training om de kennis bij te spijkeren die jij nog mist. Uiteraard leer je het meeste tijdens je werk, maar de training geeft je hiervoor alvast de juiste handvatten. Je kunt het volgende verwachten! Jij ontwikkelt in technieken als Java, Javascript en SQL. Je werkt hierbij volgens de Agile/Scrum methode; Na het afronden van

Bekijk vacature »
Alexander Tobe

Alexander Tobe

26/03/2025 09:19:38
Quote Anchor link
Ik was bezig met de laatste handeling namelijk 2 youtube filmpje toevoegen op de website maar nu werkt de grid opeens niet meer zoals het moet zijn.

Daarnaast krijg ik ook foutmeldingen bij de validator 2 van de youtube filmpjes.
https://i.postimg.cc/vmK6FWz8/Schermafbeelding-2025-03-26-091656.png

De lay-out van de 3 afbeeldingen en 2 filmpjes moet had de volgende lay-outs.

Vanaf 1024px alles naast elkaar met ruimte ertussen.
In 768px de 3 foto's naast elkaar en de 2 filmpjes eronder over de hele breedte.
In 320px alles onder elkaar.

De 320px is onder elkaar maar de witruimte is weg rechts.

Mijn vraag is duss of iemand mij kan helpen dit grid probleem op te lossen?

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
<!-- Foto- en video sectie -->
        <section class="media">
            <h2>Foto's en video's</h2>
            <div class="grid">
                <img src="Media/Index/Photo/Girls-on-car.jpg" alt="Meiden zitten op een auto">
                <img src="Media/Index/Photo/Navigation.jpg" alt="Navigatie">
                <img src="Media/Index/Photo/Pin-location.jpg" alt="Zet de route uitzetten">
            </div>
                <!-- YouTube Video -->
                <div class="video-container">
                    <iframe width="560" height="315"
                            src="https://www.youtube.com/embed/75nwHtfxSXI?si=_WpPWU94GMtxiGuw"
                            title="YouTube video player"
                            frameborder="0"
                            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                            referrerpolicy="strict-origin-when-cross-origin"
                            allowfullscreen>
                    </iframe>
                </div>
                <div class="video-container">
                    <iframe width="560" height="315"
                            src="https://www.youtube.com/embed/xOU1EFf3qik?si=u5A8mnxIjo-ZN88M"
                            title="YouTube video player"
                            frameborder="0"
                            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                            referrerpolicy="strict-origin-when-cross-origin"
                            allowfullscreen>
                    </iframe>
                </div>
        </section>


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
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
/* CSS-variabelen */
:root {
    --primary-color: #ff6600;
    --secondary-color: #333;
    --font: 'Roboto', sans-serif;
}

body {
    font-family: var(--font);
    margin: 0;
    padding: 0;
    background: #f4f4f4;
}

/* Header en navigatie */
header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--secondary-color);
    padding: 15px 30px;
}

.logo {
    display: flex;
    align-items: center;
}

.logo h1 {
    color: white;
    margin-left: 10px;
    font-family: "Monoton", sans-serif;
    font-weight: 400;
    font-style: normal;
}

nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
}

nav ul li {
    position: relative;
}

nav ul li a {
    color: white;
    text-decoration: none;
    padding: 10px 20px;
    display: block;
}

nav ul li a:hover {
    background: var(--primary-color);
}
.active {
    background-color: #ff6600;
}
/* Submenu */
.submenu {
    display: none;
    position: absolute;
    background: var(--secondary-color);
    list-style: none;
    padding: 0;
    margin: 0;
}

nav ul li:hover .submenu {
    display: block;
}

.submenu li a {
    padding: 10px;
    display: block;
    width: 150px;
}

/* Hero afbeelding */
.hero img {
    width: 100%;
    height: 200px;
    display: block;
}

/* Content sectie */
.content {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 40px;
    margin-right: 20px;
    margin-left: 20px;
}

.video-container {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 verhouding */
    height: 0;
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Foto's en video's */
.media {
    padding: 40px;
    text-align: center;
}

.media .grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    padding: 20px;
}

.media img, .media video {
    width: 100%;
    border-radius: 10px;
}

/* Plaatjes met tekst */
.info {
    padding: 40px;
}

.row {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 20px;
}

.row img {
    width: 128px;
    height: 128px;
}

.reverse {
    flex-direction: row-reverse;
}

/* Footer */
footer {
    text-align: center;
    padding: 20px;
    background: var(--secondary-color);
    color: white;
}

/* Responsiviteit */
@media (max-width: 1024px) {
    .content {
        flex-direction: column;
        text-align: center;
    }
    .row {
        flex-direction: column;
        text-align: center;
    }
}

@media (max-width: 768px) {
    header {
        flex-direction: column;
        text-align: center;
    }
    
    nav ul {
        flex-direction: column;
    }
    .media {
        flex-direction: row;
    }
}

@media (max-width: 320px) {
    .logo h1 {
    font-size: larger;
    }
    .hero img {
        width: 100%;
        height: auto;
    }

    .media .grid {
        flex-direction: column;
    }
    .info {
        font-size: small;
    }
    .row {
        flex-direction: column;
    }
    
}
/* Google Maps container */
.map-container {
    width: 100%;
    height: 400%;
    text-align: center;
}

#map {
    width: 100%;
    height: 100%;
}

/* Contactformulier */
.contact-form {
    max-width: 600px;
    margin: 40px auto;
    padding: 20px;
    background: white;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
}

.contact-form h2 {
    text-align: center;
    color: var(--secondary-color);
}

.contact-form label {
    display: block;
    margin-top: 10px;
    font-weight: bold;
}

.contact-form input,
.contact-form textarea {
    width: 100%;
    padding: 10px;
    margin-top: 5px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-family: var(--font);
}

.contact-form textarea {
    height: 150px;
}

.contact-form button {
    width: 100%;
    padding: 10px;
    margin-top: 15px;
    background: var(--primary-color);
    color: white;
    border: none;
    cursor: pointer;
    border-radius: 5px;
}

.contact-form button:hover {
    background: #e65c00;
}

/* Responsiviteit */
@media (max-width: 768px) {
    .contact-form {
        width: 90%;
    }
}
/* Tabel */
table {
    border-collapse: collapse;
    width: 100%;
  
  }
  
  th, td {
    border: 1px solid #000000;
    text-align: left;
    padding: 8px;
  }
  
  tr:nth-child(even){background-color: #f2f2f2}
  
  th {
    background-color: #333;
    color: white;
  }
  .tabel {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 40px;
    margin-right: 20px;
    margin-left: 20px;
  }
  
Gewijzigd op 26/03/2025 09:26:28 door Alexander Tobe
 
PHP hulp

PHP hulp

25/04/2025 05:11:40
 
Alexander Tobe

Alexander Tobe

27/03/2025 10:00:19
Quote Anchor link
Ik heb de witruimte bij de 320px weer terug. Heb padding toegevoegd dacht dat ik dat al geprobeerd had maar blijkbaar niet.

Had trouwens nog niet toegevoegd wat ik zelf geprobeerd had om het te fixen.

Er komt ook wel wat uit dan maar het wijzigt ook bij oa. 320px de lay-out wat niet de bedoeling is natuurlijk.
De video's blijven ook groot en onder elkaar dan in plaats van naast elkaar.

Bij 1024px:

.media .grid {
grid-template-columns: repeat(3, 1fr);
}

.media .video-container {
grid-template-columns: repeat(2, 1fr);
display: grid;
gap: 20px;
}

Bij 768px:

.media .grid {
grid-template-columns: repeat(3, 1fr);
}

.media .video-container {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}

iframe {
width: 100%;
height: auto;
}
Gewijzigd op 27/03/2025 10:05:21 door Alexander Tobe
 
Alexander Tobe

Alexander Tobe

31/03/2025 09:13:22
Quote Anchor link
Niemand die wil/kan helpen?
 
- Ariën  -
Beheerder

- Ariën -

01/04/2025 09:56:39
Quote Anchor link
Als je een testcase kan delen (in bijv. JSfiddle, of een tijdelijke pagina), dan zal het makkelijker werken. Maar hoezo zou je geen bestaand grid-framework gebruiken?
Gewijzigd op 01/04/2025 09:57:30 door - Ariën -
 
Alexander Tobe

Alexander Tobe

01/04/2025 10:34:59
Quote Anchor link
- Ariën - op 01/04/2025 09:56:39:
Als je een testcase kan delen (in bijv. JSfiddle, of een tijdelijke pagina), dan zal het makkelijker werken. Maar hoezo zou je geen bestaand grid-framework gebruiken?


bestaand grid-framework? Ik heb een template gedownload als basis die voor 80% al goed was maar moest er zelf nog dingen aan veranderen en toevoegen.

Hopelijk is deze link goed.
https://jsfiddle.net/alext305/1ojuq5cg/1/

Ik moet de site donderdag online zetten eigenlijk duss hopelijk kan het worden opgelost.
 
Alexander Tobe

Alexander Tobe

03/04/2025 10:00:58
Quote Anchor link
Niemand met de oplossing?
 



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.