Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

Howto Remove .outer-wrapper height: 100% from new search page css in 60esr?

more options

Moving from 52.9esr to 60.4esr the new tab for search page is radically different. After disabling all the cruft leaving the search and top-sites (as 52.9) the search bar and top sites are now centered in the page instead of providing a nicely formatted search at the top with top-sites below. Digging with the inspector, the problem is the css on:

where you have

   .outer-wrapper {
       display: flex;
       flex-grow: 1;
       height: 100%;   <-- this is the problem
       padding: 30px 32px 32ps;

}

Removing the `height: 100%;` restores the desired layout. How do I make this permanent in userChrome.css? What do I put there?

Moving from 52.9esr to 60.4esr the new tab for search page is radically different. After disabling all the cruft leaving the search and top-sites (as 52.9) the search bar and top sites are now centered in the page instead of providing a nicely formatted search at the top with top-sites below. Digging with the inspector, the problem is the css on: <div class="outer-wrapper wide-layout-enabled" data-reactroot=""> where you have .outer-wrapper { display: flex; flex-grow: 1; height: 100%; <-- this is the problem padding: 30px 32px 32ps; } Removing the `height: 100%;` restores the desired layout. How do I make this permanent in userChrome.css? What do I put there?
Screen ƒe photowo kpe ɖe eŋu

Ŋuɖoɖo si wotia

This should not be in userChrome.css, but in userContent.css.

The file should look sth like this:

	@namespace url(http://www.w3.org/1999/xhtml);
	
	@-moz-document url("about:newtab") {
	.outer-wrapper {
		height: unset !important;
		}
	}
Xle ŋuɖoɖo sia le goya me 👍 1

All Replies (3)

more options

For some reason the question did not capture the following:

Digging with the inspector, the problem is the css on:

<div class="outer-wrapper wide-layout-enabled" data-reactroot="">

where you have...

(I had to use the character substitutions for "<" & ">" to make it display in the question)

more options

Ɖɔɖɔɖo si wotia

This should not be in userChrome.css, but in userContent.css.

The file should look sth like this:

	@namespace url(http://www.w3.org/1999/xhtml);
	
	@-moz-document url("about:newtab") {
	.outer-wrapper {
		height: unset !important;
		}
	}
more options

TyDraniu said

This should not be in userChrome.css, but in userContent.css. The file should look sth like this:
	@namespace url(http://www.w3.org/1999/xhtml);
	
	@-moz-document url("about:newtab") {
	.outer-wrapper {
		height: unset !important;
		}
	}

Thank you for your answer.

I must have screwed something up when I copy/pasted into userContent.css. This does work! Thank you !

David C. Rankin trɔe