CODEWITHSUNDEEP
cssstylus
Hugo
Hugo

Reputation: 129

@media doesn't work in stylus

I don't want to show an image when the screen size is too small. Here I use @media to perform this task. The image has an id mpImage

#mpImage
  padding-top: 40

  @media (min-width: 480)
    display: none

But it doesn't have any response.

Further information: index.jade:

head
    meta(name='viewport', content='width=device-width')
    link(rel='stylesheet', href='/stylesheets/style.css')
body
    .carousel
        img#mpImage(src="/images/mainP1.gif")
        .carousel-caption
            h1 Title

style.styl:

.carousel
  height: 500
  background-color: #888
#mpImage
  padding-top: 50
  @media screen and (max-width: 480)
    display: none

Upvotes: 1

Views: 1476

Answers (2)

sheriffderek
sheriffderek

Reputation: 9053

You have to use some type of unit. It's not JavaScript.

https://codepen.io/sheriffderek/pen/38a098554612f43cdda74d2a5e595f0a

For fun, here is how you would use a media query with a variable

$break-point-1 = '(min-width: 600px)'

html
    background: red
    @media $break-point-1
        background: blue
    @media (min-width: 1000px)
        background: green
    @media (min-width: 1400px)
        background: lightgreen

Upvotes: 3

O. Paquay
O. Paquay

Reputation: 276

Try this way :

.carousel
  height: 500
  background-color: #888
#mpImage
  padding-top: 50
@media screen and (max-width: 480)
  #mpImage
     display: none

The style inside min-width: 480 will only apply if your screen is bigger than 480px, max-width: 480 will apply for screen smaller than 480px

Upvotes: 0

Related Questions