Avatar for Username

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

This thread was archived. Please ask a new question if you need help.

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

  • 3 replies
  • 1 has this problem
  • 57 views
  • Last reply by drankinatty

drankinatty
drankinatty
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?
Attached screenshots

Chosen solution

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;
		}
	}
Read this answer in context 👍 1

All Replies (3)

drankinatty
drankinatty Question owner
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)

TyDraniu
TyDraniu
  • Top 10 Contributor
more options

Chosen Solution

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;
		}
	}
drankinatty
drankinatty Question owner
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 !

Modified by drankinatty