0

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 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, 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?

Community
  • 1
  • 1
Steven J
  • 143
  • 1
  • 14
  • I am also noticing, my changes kind of take effect, but are being overwritten by
    under "product_tabs_gallery_contents" which has no class :/ I am using the Gift Card extension from Magestore - I cannot provide the code since it was a paid extension.
     – Steven J May 27 '14 at 16:43

1 Answers1

1

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%;
    }
}
APAD1
  • 13,509
  • 8
  • 43
  • 72