misschien een domme vraag, maar heb je een hogere horizontale resolutie dan 1440px getest? Als ik op m'n 3840*2160 op 150% m'n browser maximaliseer dan werkt de CSS niet, maar als ik het browservenster smaller maak totdat de kolommen verspringen, dan werken de filters plots wel terug omdat de css dan niet applied wordt, zie de eerste lijn:
Cascading Stylesheet:
1
| @media screen and (min-width: 1440px) { |
Ik heb een hele hoop dingen geprobeerd en als laatste optie gaf copilot aan om de volledige pricewatch te excluden als je pricewatchvenster breder is:
Cascading Stylesheet:
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
| /* Apply this layout ONLY on non-Pricewatch pages */
@media screen and (min-width: 1440px) {
body:not(.pricewatch) .mobile-first-grid:not(.trackerVisible) {
--grid-columns: 3 !important;
}
body:not(.pricewatch) .mobile-first-grid:not(.sidebar-open),
body:not(.pricewatch) .page-grid:not(.sidebar-open) {
--grid-columns: 3 !important;
}
.grid-overrides:not(.trackerVisible) .fp-grid-areas {
grid-template-areas:
"top-banner top-banner top-banner"
"category-bar category-bar category-bar"
"editorial-content editorial-content sidebar"
"community community community" !important;
}
.grid-overrides:not(.trackerVisible) .editorial-content {
display: grid;
gap: inherit;
grid-area: editorial-content;
grid-auto-rows: auto;
grid-template-areas:
"ankeiler-1 ankeiler-1"
"headline-block-1 headline-block-1"
"ankeiler-2 ankeiler-3"
"headline-block-2 headline-block-2"
"ankeiler-4 ankeiler-5"
"headline-block-3 headline-block-3"
"ankeiler-6 ankeiler-7"
"headline-block-4 headline-block-4"
"ankeiler-8 ankeiler-9"
"headline-block-5 headline-block-5" !important;
grid-template-columns: repeat(2,1fr) !important;
row-gap: 0.5rem;
}
.grid-overrides:not(.trackerVisible) .editorial-content .ankeiler-stream {
grid-area: initial !important;
display: contents !important;
}
.ankeiler-stream twk-ankeiler {
padding-top: 20px;
}
.grid-overrides .fp-grid-areas {
--grid-template-columns: repeat(var(--grid-columns),minmax(0,1fr));
}
.grid-overrides:not(.trackerVisible) .community-block .user-review:last-child .user-review-card:nth-child(2),
.grid-overrides:not(.trackerVisible) .community-block .user-review:last-child .user-review-spotlight {
display: flex !important;
}
#pg-host-shadow-root {
display: none;
}
#pg-host-shadow-root {
display: block !important;
}
.fp-grid-areas {
overflow: hidden;
}
}
/* Keep this as-is */
@media screen and (min-width: 320px){
.grid-overrides .fp-grid-areas {
--grid-template-columns: repeat(var(--grid-columns),minmax(0,1fr)) !important;
}
} |
ik vermoed dat lijnen 1 en 71 gewoon commentaar zijn en de echte workaround in lijnen 2-10 zit
lijnen 54 en 62-64 lijken me ook wijzigingen te zijn geweest die niet nodig zijn.
@
VorteX Ik weet niet hoe actief je hier op het forum volgt, maar als wat ik hieruit opmaak klopt, kan je dan jouw snippet aanpassen? kwestie dat ik mijn kopie niet publiek wil zetten omdat je andere gebruikers dan nog steeds met hetzelfde probleem zullen zitten op een groot scherm.
:strip_exif()/u/3333/pumpkin_avatar.gif?f=community){kind=avatar}
Uitgezet - maar nog steeds geen verschil. Ik zie in de devtools op de netwerktab nu geen geblokeerde items meer (filter staat op "all") en in de JS console heb ik nu een error::strip_icc():strip_exif()/u/58622/weird_kitten.jpg?f=community)
/u/62384/crop61891f444d6e9.png?f=community)
daarom dat ik de aanpassingen aan de originele maker overlaat. als zijn snippet nu terug werkt, dan verwijder ik mijn privé-versie.