frameless / gemeentevoorbeeld.nl

Collaboration between Frameless, NL Design System and VNG to experience components in an example layout.
https://www.gemeentevoorbeeld.nl
European Union Public License 1.2
1 stars 0 forks source link

Responsiveness desktop #452

Open TessaViergever opened 4 months ago

TessaViergever commented 4 months ago

Gevonden probleem

Het lijkt erop dat de issue met de responsiveness op mobiel (#438) gefixt is.

Bovenstaande issue lijkt nu echter omgekeerd te zijn: responsiveness op desktop gaat niet goed. (Ik heb verhuizing doorgeven als voorbeeld genomen maar het gaat op meerdere pagina's mis)

Dit is hoe de verhuizing doorgeven pagina er nu uit ziet op desktop:

Dit is hoe de desktop versie van een pagina eruit hoort te zien (in wmebv map gaat het wel goed)

De versie op mobiel ziet er nu uit zoals het hoort (content loopt niet meer tegen de randen aan, issue #438 lijkt dus opgelost):

#

Ik weet niet of dit met bovenstaande te maken heeft maar op mobiel is ook verschil tussen bepaalde dingen. De navigatie op de "graffiti verwijderen" pagina wijkt bijv. af van het voorbeeld hierboven:

Het lijkt me dat uiteindelijk een mobiel menu (zoals hierboven) de bedoeling is. Hier is echter op dit moment nog van alles mis mee (zie #441 ).

Mogelijke oplossing

Het lijkt mij dat deze verschillen in responsiveness ontstaan zijn door de wijzigingen van PR #447 . Hierin zijn namelijk wijzigingen gedaan in de globals.css file, om de responsiveness mobiel issue op te lossen.

Ik denk dat de pagina's waar het nu op mis gaat, in hun eigen css files (bijv. details.css?) wat aanpassingen nodig hebben om de verandering uit globals te corrigeren. OF een toevoeging in globals.css (als de oplossing voor iedere pagina gelijk is, anders veel dubbele css voor hetzelfde probleem). Wellicht dat media queries hier een rol in kunnen spelen.

Tip van Rowan: https://nl-design-system.github.io/denhaag/?path=/docs/css-page-elements-responsive-content-wrapper--docs