Makes Instagram use its space better by filling the screen on home and profile pages using a grid layout.
/* ==UserStyle==
@name Instagram widescreen
@namespace legosavant
@version 2.0.0
@description Makes Instagram use its space better by filling the screen on home and profile pages using a grid layout.
@preprocessor stylus
@license gplv3
@var checkbox two-row-home 'two row home' 1
==/UserStyle== */
@-moz-document domain("instagram.com") {
/*profile*/
.Nnq7C {
display:inline-flex
}
._a3gq ._aayp [style^="flex-direction: column; padding-bottom"] {
display:grid;
padding:0!important
}
._a3gq ._ac7v:nth-child(even) {
grid-column:2
}
._a3gq ._ac7v:nth-child(odd) {
grid-column:1;
margin-right:14px
}
._a3gq ._aanf { /*huge spacing is stupid*/
margin-right:14px;
margin-bottom:14px
}
._a3gq ._aa6b._aa6d ._aa6e {
max-width:none!Important
}
._a3gq ._aang {
margin:0
}
@media (min-width:0px) {
._a3gq ._aabd { /*width of images*/
width:101px!important;
flex:none
}
}
@media (min-width:850px) {
._a3gq ._aa_y {
max-width:790px /*width of main profile page*/
}
._a3gq ._aanf { /*width of images*/
width:120px!important;
flex:none
}
}
@media (min-width:1150px) {
._a3gq ._aa_y {
max-width:1090px /*width of main profile page*/
}
._a3gq ._aanf { /*width of images*/
width:170px!important;
flex:none
}
.Kj7h1 ._a3gq ._aabd {
width:120px!important
}
}
@media (min-width:1386px) {
._a3gq ._aa_y {
max-width:1330px /*width of main profile page*/
}
._a3gq ._aanf { /*width of images*/
width:210px!important;
flex:none
}
.Kj7h1 ._a3gq ._aabd {
width:170px!important
}
}
@media (min-width:1750px) {
._a3gq ._aa_y {
max-width:1690px /*width of main profile page*/
}
._a3gq ._aanf { /*width of images*/
width:266px!important;
flex:none
}
.Kj7h1 ._a3gq ._aabd {
width:188px!important
}
}
@media (min-width:1919px) {
._a3gq ._aa_y {
max-width:1916px /*width of main profile page*/
}
._a3gq ._aanf { /*width of images*/
width:296px!important;
flex:none
}
.Kj7h1 ._a3gq ._aabd {
width:216px!important
}
._a3gq ._aa6b._aa6d {
max-width:1000px!Important
}
}
@media (min-width:2100px) {
._a3gq ._aa_y {
max-width:2000px /*width of main profile page*/
}
._a3gq ._aanf { /*width of images*/
width:320px!important;
flex:none
}
._a3gq ._aa6b._aa6d {
max-width:1100px!Important
}
}
@media (min-width:2600px) {
._a3gq ._aa_y {
max-width:2280px /*width of main profile page*/
}
._a3gq ._aanf { /*width of images*/
width:360px!important;
flex:none
}
._a3gq ._aa6b._aa6d {
max-width:1400px!Important
}
}
/*igtv and similar*/
._a3gq ._ab9p [style^="flex-direction: column; padding-bottom"], ._ab04 [style^="flex-direction: column; padding-bottom"], ._aa-i [style^="flex-direction: column; padding-bottom"], ._a3gq ._aa6g [style^="flex-direction: column; padding-bottom"]{
display:grid
}
._a3gq ._aa_9 {
margin-right:5px;
margin-bottom:5px
}
._a3gq ._aa_a {
margin-bottom:0;
}
._a3gq ._abq3 {
margin-right:14px;
}
._a3gq ._abq4 {
margin-bottom:14px
}
._ab04 ._aang {
margin-bottom:0
}
@media (min-width:850px) {
.Nnq7C .b9_1r, ._a3gq ._aa_9 {
max-width:94px!important;
}
._ab04 ._aanf {
max-width:141px
}
}
@media (min-width:1150px) {
.Nnq7C .b9_1r, ._a3gq ._aa_9 {
max-width:131px!important;
}
._ab04 ._aanf {
max-width:171px
}
}
@media (min-width:1386px) {
.Nnq7C .b9_1r, ._a3gq ._aa_9 {
max-width:161px!important;
}
._ab04 ._aanf {
max-width:222px
}
}
@media (min-width:1750px) {
.Nnq7C .b9_1r, ._a3gq ._aa_9 {
max-width:206px!important;
}
._ab04 ._aanf {
max-width:236px
}
}
@media (min-width:1919px) {
.Nnq7C .b9_1r, ._a3gq ._aa_9 {
max-width:226px!important;
}
._ab04 ._aanf {
max-width:256px
}
}
@media (max-width:1150px) {
.-V_eO:nth-child(1) {
margin:50px 0 0;
}
.vrLJa .-V_eO {
margin-left:15%!important
}
.v1Nh3.kIKUG._bz0w .-V_eO {
margin-left:22%
}
.Ln-UN {
display:block;
}
}
/*post*/
._a3gq ._aa6g [style^="flex-direction: column; padding-bottom"] ._ac7v._aang {
width:50%
}
._aa6g {
position:absolute;
left:-22%
}
@media (max-width:1386px) {
._aa6g {
left:-7%
}
}
@media (max-width:1106px) {
._aa6g {
left:0%
}
}
.Z666a {
padding-top:0
}
.Z666a div[style^="f"] {
display:block
}
.Z666a ._a3gq ._aabd {
max-width:268px!important
}
}
@-moz-document url("https://www.instagram.com/"), url-prefix("https://www.instagram.com/home") {
/*home*/
._a3gq ._aal- {
max-width:calc(65%);
padding-right:380px
}
._a3gq ._aam3 {
max-width:none
}
._aak6._aak7._aak8._aak9._aaka {
left:auto!important;
right:40px
}
}