in.gr - broken layout

[back2themoon]

Cannot say if this is related (partially, fully or at all) to inset-inline shorthand support - Issue #2857 (UXP), so here's another layout problem.

Their home page seems to be fine: https://www.in.gr/

Scroll further down though and you will notice text overlap on the left.

All page articles are more adversely affected: layout is broken. Main article text is squeezed in a middle-right tiny section, and secondary sections like "Spotlight" take center place:

https://www.in.gr/2025/09/25/english-ed ... ighest-eu/

[tellu-white]

Cannot say if this is related (partially, fully or at all) to inset-inline shorthand support - Issue #2857 (UXP), so here's another layout problem.

Their home page seems to be fine: https://www.in.gr/

Scroll further down though and you will notice text overlap on the left.

All page articles are more adversely affected: layout is broken. Main article text is squeezed in a middle-right tiny section, and secondary sections like "Spotlight" take center place:

https://www.in.gr/2025/09/25/english-ed ... ighest-eu/

Try the following combination of CSS code + filter in the "Intercept & Modify HTTP Response 4.3" add-on. Without the filter, some images will not load (see screenshots below).

CSS:

Code: Select all

@-moz-document url("https://www.in.gr/") {
	#topnews .column {
		padding-left: 20px !important;
	}
	
	.bigrow-article .wrap-mask-title {
		position: relative !important;
	}
	
	.column.is-4-desktop.is-full-tablet.is-full-mobile.is-full-small {
		width: 200px !important;
		height: 200px !important;
	}
	
	.extra-top-posts.extp__1 {
		margin-bottom: 60px !important;
	}
}

@-moz-document regexp("https:\/\/www.in.gr\/.+") {
	.column.order__0 {
		width: calc(100vw / 3) !important;
		max-width: calc(100vw / 3) !important;
	}
	
	.column.order__1 {
		width: calc(100vw / 6) !important;
		max-width: calc(100vw / 6) !important;
	}
	
	.column.pt-0 {
		margin-right: 60px !important;
	}
}

Filter:

Code: Select all

[`/in.gr/`, `/.*/`, [`/<noscript[\S\s]*?<\/noscript>/g`, ``], [`/<figure.*?>/g`, ``], [`/<\/figure>/g`, ``]]

Screenshots:

1. URL = https://www.in.gr/

a. Without workaround:

01_a.jpg

b. With workaround:

01_b.jpg

a. Without workaround:

02_a.jpg

b. With workaround:

02_b_1.jpg

02_b_2.jpg

***

2. URL = https://www.in.gr/2025/10/12/life/lathos-vasilissa-den-einai-maria-antouaneta-einai-adelfi-tis-anatropi-gia-istoriko-paidiko-portreto/

a. Without workaround:

03_a.jpg

b. With workaround:

03_b.jpg

a. Without workaround:

04_a.jpg

b. With workaround:

04_b.jpg

[adoxa]

A simpler change - remove the use of min.

Modify HTTP Response filter...

Code: Select all

[["www.in.gr",["/autoptimize.*\\.css$/",["min(100vw,var(--maxgridrow))","var(--maxgridrow)"]]]]

or userstyle.

Code: Select all

@-moz-document domain("www.in.gr") {
  :root {
    --col-width: calc(var(--maxgridrow)/26)
  }
}

[tellu-white]

A simpler change - remove the use of min.

Modify HTTP Response filter...

or userstyle.

It works

A small addition: the "!important" rule must be added to the CSS code:

Code: Select all

@-moz-document domain("www.in.gr") {
	:root {
		--col-width: calc(var(--maxgridrow)/26) !important;
	}
}

[back2themoon]

Thank you both.

So, what is the problem exactly? "Min"?

[adoxa]

Yep, CSS functions min/max/clamp are not yet supported, Issue #2230 (UXP).