This is my first question here, but I would just like to say this website has helped me on countless times over my years. I guess I've got to the stage where I have my own questions to ask!
Sorry if the question isn't clear, I'll try to elaborate: I have assigned a transition to some of my elements, so that when they are hovered over they rise upwards (ie; .example:hover {margin-top: -25px}
).
You can see where I have applied this on this page.
Hover over the elements underneath the "Coming Soon" alert box (ie; "Pixel Perfect Designs", "Beautifully Clean Code" & "Over 5 years Experience").
All works fine, however you'll notice that when the browser window is re-sized small enough so the elements are stacked vertically (I believe this is @media (max-width: 767px)
), the hover effect doesn't seem quite at clean. I would like to remove the effect altogether when the website is displayed this way (for mobile devices).
So the question is how do I change a class's properties based on the width of the browser? I would like to remove the margin-top when hovered when displayed for a mobile device (ie; < 767px) but keep it there when viewed normally.
Thanks