Mossati / connect-your-tribe-profile-card

Redesign je visitekaartje op basis van een bestaande API.
https://blue-modern-giraffe.cyclic.app
MIT License
0 stars 0 forks source link

CSS issues #4

Open Jaywesterlow opened 4 months ago

Jaywesterlow commented 4 months ago

CSS Issues

body min-height & min-width 100% heeft geen impact, er is geen parent waarvan hij 100% kan vullen.

CSS nesting is goed, maar 5 genestte elementen is bijna teveel. Hou 4, en uiterlijk 5 genestte elementen om het overzichtelijk te houden. Voor Psuedo elementen en 'sub-'selectors zoals :hover en ::before of ::after kun je het beter altijd in het element nesten voor duidelijkheid door &::after { } te gebruiken.

Aks11-11 commented 4 months ago

Het lijkt erop dat je problemen hebt met het instellen van de min-height en min-width eigenschappen in CSS, en met het beheren van het nesten van elementen. Hier zijn een paar oplossingen:

Gebruik van min-height en min-width: Als je wilt dat een element altijd ten minste een bepaalde hoogte en breedte heeft, kun je min-height en min-width gebruiken. Als deze eigenschappen geen effect lijken te hebben, controleer dan of er geen conflicten zijn met andere stijlregels of of het element correct is geselecteerd. Zorg er ook voor dat het element inhoud heeft om de minimale hoogte en breedte te vullen. Bijvoorbeeld: css Copy code .element { min-height: 100px; min-width: 200px; } Beperk het nesten van elementen: Het is een goed idee om het aantal geneste elementen te beperken om de code overzichtelijk te houden en de prestaties te verbeteren. Probeer niet meer dan vier niveaus van nesten te gebruiken. Als je meer dan vier niveaus nodig hebt, overweeg dan of je de structuur van je HTML kunt herschikken om het aantal geneste elementen te verminderen. Pseudo-elementen en sub-selectors: Pseudo-elementen zoals ::before en ::after, en sub-selectors zoals :hover, kunnen beter binnen het element worden genest voor duidelijkheid. Gebruik &::after om pseudo-elementen binnen het element te nesten. Bijvoorbeeld: css Copy code .element { background-color: blue;

&::after {
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    background-color: red;
}

} Zorg ervoor dat je CSS-regels correct zijn gespecificeerd en dat er geen conflicten zijn met andere stijlen of selectors. Als je specifieke problemen hebt met bepaalde stukken code, voel je vrij om ze te delen, zodat ik je gerichtere hulp kan bieden.