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 1.2.0
@description Makes Instagram use its space better by filling the screen on home and profile pages using a grid layout.
@author legosavant
==/UserStyle== */
@-moz-document domain("instagram.com") {
/*profile*/
.Nnq7C {
display:inline-flex
}
.ySN3v > div > div, ._2z6nI > article > div > div {
display:block
}
._bz0w { /*huge spacing is stupid*/
margin-right:14px
}
.weEfm {
margin-bottom:14px
}
.Nnq7C:nth-child(odd) {
margin-right:14px
}
@media (min-width:0px) {
.Nnq7C>* { /*width of images*/
width:101px!important;
flex:none
}
}
@media (min-width:850px) {
.v9tJq {
max-width:790px /*width of main profile page*/
}
.Nnq7C>* { /*width of images*/
width:120px!important;
flex:none
}
}
@media (min-width:1150px) {
.v9tJq {
max-width:1090px /*width of main profile page*/
}
.Nnq7C>* { /*width of images*/
width:170px!important;
flex:none
}
}
@media (min-width:1386px) {
.v9tJq {
max-width:1330px /*width of main profile page*/
}
.Nnq7C>* { /*width of images*/
width:210px!important;
flex:none
}
}
@media (min-width:1750px) {
.v9tJq {
max-width:1690px /*width of main profile page*/
}
.Nnq7C>* { /*width of images*/
width:270px!important;
flex:none
}
}
@media (min-width:1919px) {
.v9tJq {
max-width:1846px /*width of main profile page*/
}
.Nnq7C>* { /*width of images*/
width:296px!important;
flex:none
}
}
/*igtv and similar*/
.b9_1r {
margin-right:5px
}
.ryi-h {
margin-bottom:5px;
}
._2z6nI > div > div > div[style*="flex-direction: column"] {
display:block
}
.Nnq7C.ryi-h, .Gx7Kn .weEfm ._bz0w {
margin-right:5px
}
.Gx7Kn .weEfm {
margin-right:5px;
margin-bottom:5px
}
.Gx7Kn .weEfm:nth-child(even), .Nnq7C.ryi-h:nth-child(even), ._bz0w:last-child {
margin-right:0!important
}
@media (min-width:850px) {
.Nnq7C .b9_1r, .Gx7Kn .weEfm ._bz0w {
width:94px!important;
}
}
@media (min-width:1150px) {
.Nnq7C .b9_1r, .Gx7Kn .weEfm ._bz0w {
width:131px!important;
}
.-V_eO {
margin-right:5px
}
}
@media (min-width:1386px) {
.Nnq7C .b9_1r, .Gx7Kn .weEfm ._bz0w {
width:161px!important;
}
}
@media (min-width:1750px) {
.Nnq7C .b9_1r, .Gx7Kn .weEfm ._bz0w {
width:206px!important;
}
}
@media (min-width:1919px) {
.Nnq7C .b9_1r, .Gx7Kn .weEfm ._bz0w {
width:226px!important;
}
}
@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;
}
}
}
@-moz-document url("https://www.instagram.com/"), url-prefix("https://www.instagram.com/home") {
/*home*/
.M9sTE:nth-child(odd) {
margin-right:5px
}
.C3uDN {
padding-top:0
}
.YT6rB {
top:48px
}
@media (max-width:1100px) {
.COOzN {
display:none;
}
._1SP8R {
max-width:800px
}
.C3uDN > div > div > div {
display:block
}
}
@media (min-width:0px) {
.M9sTE { /*image, if you make it small enough itll be 3 per row*/
display: inline-flex;
width:360px
}
.VideM { /*the stories bar*/
width:722px
}
.cGcGK > div > div {
display:block
}
.cGcGK {
max-width:1400px!important;
width:1000px!important
}
.j9XKR {
max-width:1000px!important;
width:100%!important;
}
.COOzN {
left:auto!Important;
right:20px
}
}
@media (min-width:1320px) {
.M9sTE {
display: inline-flex;
width:460px
}
.VideM {
width:922px
}
.cGcGK > div > div {
display:block
}
.cGcGK {
max-width:1400px!important;
width:1200px!important
}
.j9XKR {
max-width:1200px!important;
width:100%!important;
}
.COOzN {
left:auto!Important;
right:20px
}
}
@media (min-width:1540px) {
.M9sTE {
display: inline-flex;
width:560px
}
.M9sTE:nth-child(odd) {
margin-right:5px
}
.VideM {
width:1122px
}
.cGcGK > div > div {
display:block
}
.cGcGK {
max-width:1400px!important;
width:1400px!important
}
.j9XKR {
max-width:1400px!important;
width:100%!important;
}
.COOzN {
left:auto!Important;
right:20px
}
}
}