CODEWITHSUNDEEP
htmlcssmobilemedia-queriestablet
Steven J
Steven J

Reputation: 143

CSS Media queries for Mobile & Large screen sizes

I have a Magento store for a client and need to have a certain ID/Class have the "zoom" size changed based on screen size:

Tuga Sunwear - Gift Card

The DIV ID is "giftcard-template-back" and you can find it by doing "inspect element" on the giftcard background image (text has separate classes), this is what I have so far, but it's not working:

@media screen and (min-device-width: 0px) and (max-device-width: 479px) {
  #giftcard-template-back {
     zoom: 41%;
  }
}
@media screen and (min-device-width: 480px) and (max-device-width: 959px) {
  #giftcard-template-back {
     zoom: 67%;
  }
}
@media screen and (min-device-width: 960px) {
  #giftcard-template-back {
     zoom: 98%;
  }
}

It works when I disable the 41% from the preceding DIV..but I can't figure out how to turn it off completely.

I'm not super great with mobile CSS so if this needs some dire cleanup, please let me know.

What I am trying to do is have the "zoom" set at shown percentages between 0px-479px, 480px-959px, and 960px +

I searched around a little bit but couldn't find anything exactly like this, the closest was Media Queries - Stack Overflow, so I appreciate the help I can get from you all!

** EDITS **

I have applied the "#" to the class names and updated the CSS a little. The desktop 960px+ shows perfectly but when I resize my window, it still loads the 98% zoom. Does anyone have a suggestion?

Upvotes: 0

Views: 879

Answers (1)

APAD1
APAD1

Reputation: 13666

ID CSS selectors start with a # It should be #giftcard-template-back

@media only screen and (max-device-width: 479px) {
  #giftcard-template-back {
     zoom: 41%;
  }
}    
@media only screen and (max-device-width: 959px) {
  #giftcard-template-back {
     zoom: 67%;
  }
}
@media only screen and (min-device-width: 960px) {
  #giftcard-template-back {
     zoom: 98%;
  }
}

Upvotes: 1

Related Questions