Makes Instagram use its space better by filling the screen on home and profile pages using a grid layout.
Per
/* ==UserStyle==
@name Instagram widescreen
@namespace legosavant
@version 1.1.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:1366px) {
.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
}
}
/*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
}
}
}