You can kill me now...

position: relative
display: inline-block
float: left
width: calc(25vw - (204px/4) - (320px/4))
height: calc(25vw - (204px/4) - (320px/4))
overflow: hidden

@media(max-width: 1600px)
width: calc(33.333vw - (204px/3) - (320px/3))
height: calc(33.333vw - (204px/3) - (320px/3))

@media(max-width: 1440px)
width: calc(33.333vw - (48px/3) - (320px/3))
height: calc(33.333vw - (48px/3) - (320px/3))

@media(max-width: 1200px)
width: calc(50vw - (48px/2) - (320px/2))
height: calc(50vw - (48px/2) - (320px/2))

@media(max-width: 1024px)
width: calc(50vw - (48px/2))
height: calc(50vw - (48px/2))

@media(max-width: 720px)
width: calc(50vw - (24px/2))
height: calc(50vw - (24px/2))

@media(max-width: 580px)
width: 100%
height: calc(100vw - 24px)

  • 0
    Noob here, apparently.
    What is that.
  • 0
    @Monus vw unit is viewport width but still I will have to change this coz this fucking unis counts also width of scrollbar. Fuck this shit.
  • 0
    For more responsiveness and readibility, don’t forget to add some iPhone X constants, errm..., variables, eee... environmentals ;)
  • 0
    @lamka02sk Wow so many calcs and queries. I'm impressed. Have you tried CSS Grid? Might save you a lot of query management.
  • 1
    @ImATeaPot Actually I had to rewrite this piece of shit with paddings because of scrollbar width. It works well now. Grid is not a solution for me as I have to support a bit older browsers.
Add Comment