Goedemiddag Leden,

Is zit met het volgende problemen. Ik heb 6 afbeelding op een pagina deze zijn verdeelt in 2 rijen.
Deze hadden allemaal dezelfde grote namelijk: col-lg-4

Nu wil ik graag de afbeeldingen col-lg-3 hebben en hierbij maak ik gebruik van col-lg-offset-1 om ervoor te zorgen dat de tussen ruimte groter wordt.

Het probleem is dat ik bij foto 2 en 3 en 5 en 6 wel de offset wil toepassen, maar niet bij foto 1 en 3.

Dit is de code dit gebruikt wordt op alle 6 de afbeeldingen:

$images .= '<div class="col-xs-6 col-md-offset-1 col-md-3 homeImg">';

Wie heeft een goede oplossing?
Waarschijnlijk bedoel je niet bij foto 1 en foto 4.

Je kunt dan in CSS met :nth-child(3n+1) werken om foto 1, 4, 7 enz afwijkend op te maken.
.homeImg:nth-child(3n+1) {}
De afbeeldingen worden via een cms ingeladen, maar de indeling is als volgt.


Huidige situatie:

homeimg
[col-md-4] [col-md-4] [col-md-4]
[col-md-4] [col-md-4] [col-md-4]

Hoe moet dit worden:

[col-md-3] [col-md-3 offset1] [col-md-3 offset1]
[col-md-3] [col-md-3 offset1] [col-md-3 offset1]



[size=xsmall]Toevoeging op 08/06/2016 14:18:46:[/size]

Door de

.col-md-offset-1 te veranderen naar 6% kom ik wel tot het gewenst resultaat, dit zou dan alleen moeten gelden voor de class homeImg.

Wat is legit?
In je origineel had je ook nog de class homeImg bij elke afbeelding.
Die kon je perfect gebruiken om de 1e, 4e, enz een afwijkende opmaak mee te geven.

[col-md-3 homeImg] [col-md-3 homeImg] [col-md-3 homeImg]
[col-md-3 homeImg] [col-md-3 homeImg] [col-md-3 homeImg]


.homeImg {..de offset settings..}
.homeImg:nth-child(3n+1) {.. de offset settings op std..}

Mocht dat niet lukken (de homeImg), dan kan je eventueel wel refereren naar een div die eromheen ligt.

<div class="homeImages">
[col-md-3] [col-md-3] [col-md-3]
[col-md-3] [col-md-3] [col-md-3]
</div>

met
.homeImages img {..de offset settings..}
.homeImages img:nth-of-type(3n+1) {.. de offset settings op std..}
Ik heb het nu momenteel opgelost door een mediarule 1200+ op te zetten en die een margin-left mee te geven.

Is er een betere manier?

[size=xsmall]Toevoeging op 08/06/2016 14:28:18:[/size]

Bedankt Jan, ik ga jouw manier proberen toe te passen. Bedankt voor je tijd en moeite.

Reageren