PHPhulp.nl
35k+ leden Over PHPhulp Offerte opdracht Contact

Logo verdwijnt bij klein breakpoint

Door - Ariën - op 26-01-2022 16:06 gewijzigd op 26-01-2022 16:07
3.320 views
Ik merk iets heel vreemd op aan mijn bootstrapped layout op mijn site.
Sinds ik pas geleden het logo heb aangepast naar een SVG, valt het hele logo weg op smalle breakpoints.

Bekijk de site maar eens op een desktop en maar het eens smaller. Of bekijk het eens op een tablet.

Met het oude logo (gebruik deze eens in de developer-mode van je browser: logo-308x60.png) werkte het prima.
Heeft Bootstrap moeite met SVG of iets dergelijks? Ik kan het niet achterhalen.

Ik kan wel met wat margins de logo weer op zijn plaats brengen, en dat voor deze breakpoint afdwingen, maar dat voelt als een ranzige hack.

[img]https://i.ibb.co/b7Yrrnn/afbeelding.png[/img]
[img]https://i.ibb.co/qxKYn83/afbeelding.png[/img]

Iemand die een blik erop kan schijnen?
- Ariën -
31-01-2022 17:02 gewijzigd op 31-01-2022 17:15
Het lijkt dus een bug te zijn met een: h1 heading met een img én de maten óf de SVG ondersteuning.
Opmerkelijk. Met jouw code en de onclick werkt het wel.

Die heading zal ik weg doen. Nutteloos of het is een SEO-iets, maar die alt zal ook moeten volstaan dan.

@Ward: Anders kan ik die onzichtbare heading met vóór de anchor van het logo zetten.
Ik weet nu waarin ik de oplossing moet zoeken. Maar ik snap alleen de bug niet echt :-P

[size=xsmall]Toevoeging op 31/01/2022 17:14:32:[/size]

Hm.... Aan die heading ligt het niet. Als ik die weglaat en ik gebruik een a-tag (anchor) dan verdwijnt het logo. Dus die anchor doet iets vreemds....

Hoe dan?
We zijn er dus nog niet.
Ozzie PHP
31-01-2022 17:21
Hmmm, ik denk dat ik een oplossing heb gevonden.

Voeg eens een width toe aan de img ...

<img src="img/treinenweb.svg" alt="Treinenweb.nl" style="width: 280px;">

Ik vermoed dat Firefox geen 'fysieke' omvang herkent omdat het een svg is (die geen daadwerkelijke omvang heeft).
- Ariën -
31-01-2022 17:30
Dat is het blijkbaar..... :-D
Thnx Ozzie!
Ozzie PHP
31-01-2022 17:52
You're welcome ;-)

Reageren

Inloggen om te reageren