Optimize-FB-mobile

optimize-fb-mobile.user.css

/*
==UserCSS==
@name             Optimize-FB-mobile
@namespace        e-t-l
@homepage         https://gist.github.com/e-t-l/c38c977ca12c76040b56429ff5acf869
downloadURL       https://gist.github.com/e-t-l/c38c977ca12c76040b56429ff5acf869/raw/
@match            https://www.facebook.com/*
@version          1.5
@author           e-t-l
@license          CC0-1.0 
==/UserCSS==
*/

/*
==UserStyle==
@name             Optimize-FB-mobile
@namespace        e-t-l
@homepage         https://gist.github.com/e-t-l/c38c977ca12c76040b56429ff5acf869
@downloadURL      https://gist.github.com/e-t-l/c38c977ca12c76040b56429ff5acf869/raw/
@match            https://www.facebook.com/*
@version          1.5
@author           e-t-l
@license          CC0-1.0 
==/UserStyle==
*/

/* FB keeps changing the li object orders so nth-child keeps breaking;
The :has selector is more reliable, but requires setting a browser preference...
Firefox/Fennec: in About:config, set "layout.css.has-selector.enabled" to TRUE
Chromium: in Chrome://flags, set "Experimental Web Platform features" to ENABLED */ 
' li.x1i64zmx:nth-child(4){
'  display: none !important;
' }
li.x1i64zmx:has( > span > div > a[aria-label="Watch"] ){
  display: none !important;
}

li.x1i64zmx{
  margin-left: -5%; 
  display: block !important;

}
ul.xuk3077{
  margin-right: 0px
}
.x15zctf7 > span:nth-child(1){
  display: none !important;
}
.x15zctf7 > div{
  margin-right: 3%;
}
.x15zctf7 > div:nth-child(2){
  margin-right: -10%
}