Uassets: web.de Layout messed up

[thaliel]

URL(s) where the issue occurs

https://web.de/

Describe the issue

The new site layout is dislocated to the left, so that part of the actual page is missing. This is fixed when I uncheck Ublock filters

Screenshot(s)

https://i.imgur.com/n4Ej4H7.png

Versions

• Browser/version: Firefox 72.0.1
• uBlock Origin version: 1.24.2

Settings

no settings changed, personal filters do not cause this to happen.

Notes

Tested deactivating UBO completely, then went through the lists one by one. Thus I found the Ublock filters list is responsible

[mapx-]

provide specific link for that page

[thaliel]

https://web.de/

[mapx-]

I get a different page at that address, it's why I asked for the specific page in your screenshot

[krystian3w]

That is homepage.

[thaliel]

here you can see it. Maybe thhe page is different for people outside of Germany?

[mapx-]

on my side:

[thaliel]

that is their old layout, which I cannot get to appear whenever I open the page

[krystian3w]

Can you zip cookies for web.de by:

https://github.com/ysard/cookie-quick-manager

---

that is their old layout, which I cannot get to appear whenever I open the page

With Hola VPN I turned on new layout.

[thaliel]

by zip you mean export?

[krystian3w]

Yes if @mapx- unable reproduce new layout with Hola VPN "proxy".

[krystian3w]

Glitched grid should fix:

https://www.w3schools.com/css/css_grid.asp

web.de##body > #app > .main:style(grid-template-columns: calc(var(--col-count)*var(--teaser-width) + (var(--col-count) - 1)*var(--grid-column-gap) + 2*var(--grid-border)) !important;)

! or scriplet:

web.de##+js(ra, data-ad-type, body)

-grid-template-columns: calc(var(--col-count)*var(--teaser-width) + (var(--col-count) - 1)*var(--grid-column-gap) + 2*var(--grid-border)) minmax(var(--sitebar-width),1fr);
+grid-template-columns: calc(var(--col-count)*var(--teaser-width) + (var(--col-count) - 1)*var(--grid-column-gap) + 2*var(--grid-border));

minmax(var(--sitebar-width),1fr) may is invalid?

[thaliel]

well, I was just looking at cookies for this site and thought hey, might as well clear them just to check. And whaddaya know, that already helped

[krystian3w]

https://js.ui-portal.de/homepage/cs/2020/1.30/webde/homepage.css

-[data-ad-type="event-flagship"] .main, [data-ad-type="event-sitebar"] .main, [data-ad-type="flagship"] .main, [data-ad-type="sitebar"] .main {
-    grid-template-columns: calc(var(--col-count)*var(--teaser-width) + (var(--col-count) - 1)*var(--grid-column-gap) + 2*var(--grid-border)) minmax(var(--sitebar-width),1fr);
-}

+.main {
+    grid-template-columns: calc(var(--col-count)*var(--teaser-width) + (var(--col-count) - 1)*var(--grid-column-gap) + 2*var(--grid-border));
+}

[krystian3w]

https://streamable.com/tio67

[okiehsch]

@thaliel do you still get this issue after you refresh and if so does the suggested fix by krystian3w
web.de##body[data-ad-type] > #app > .main:style(grid-template-columns: calc(var(--col-count)*var(--teaser-width) + (var(--col-count) - 1)*var(--grid-column-gap) + 2*var(--grid-border)) !important;) web.de##+js(ra, data-ad-type, body)
work for you?

[thaliel]

https://streamable.com/tio67

sorry, I do not understand this at all
web.de##body[data-ad-type] > #app > .main:style(grid-template-columns: calc(var(--col-count)*var(--teaser-width) + (var(--col-count) - 1)*var(--grid-column-gap) + 2*var(--grid-border)) !important;) web.de##+js(ra, data-ad-type, body)
or this, where/how do add this?

[okiehsch]

Copy paste it in https://github.com/gorhill/uBlock/wiki/Dashboard:-My-filters

[thaliel]

thanks, let's see if this does the trick

[thaliel]

nah, no change here. I am close to loosing my sanity about this.

[krystian3w]

Simplifed CSS:

web.de##.main:style(grid-template-columns: calc(var(--col-count)*var(--teaser-width) + (var(--col-count) - 1)*var(--grid-column-gap) + 2*var(--grid-border)) !important;)

I removed:

-body[data-ad-type] > #app >

[thaliel]

still no change

Simplifed CSS:

web.de##.main:style(grid-template-columns: calc(var(--col-count)*var(--teaser-width) + (var(--col-count) - 1)*var(--grid-column-gap) + 2*var(--grid-border)) !important;)

I removed:

-body[data-ad-type] > #app >

does not help either

what I would need is this
https://i.imgur.com/dxtD8eO.png

but you cannot save any changes you make here...arrrrrrrrrrrrrrrrrrrrrgh!

[krystian3w]

100% width?

web.de##body > #app > .main:style(display: block !important;)
web.de##.main [data-ac]:empty

[thaliel]

100% width?

web.de##body > #app > .main:style(display: block !important;)
web.de##.main [data-ac]:empty

looks good for now, fingers crossed it stays that way

[krystian3w]

@okiehsch this is still needed:

web.de##+js(set, CustomEvent, noopFunc) https://github.com/uBlockOrigin/uAssets/issues/6541

after disable also remove effect:

"The new site layout is dislocated to the left,"

[okiehsch]

this is still needed:
web.de##+js(set, CustomEvent, noopFunc)

Yes, it is still needed without it I get pre-roll ads.
I will add
web.de##body > #app > .main:style(display: block !important;) web.de##.main [data-ac]:empty
to the uBO-filters list.

@krystian3w thanks for the help. 👍

[JobcenterTycoon]

please remove web.de##body > #app > .main:style(display: block !important;) because the site looks messed up with that filter

[JobcenterTycoon]

and add gmx.*##.main [data-ac]:empty for gmx

[krystian3w]

@okiehsch test proposition by Jobcenter.