Hello Everyone,
I am trying to put an image of our health and safety policy as a TNEW Message Only Rule that shows on the cart and checkout windows. I can get the image to show and link to the full policy in a new window (so as to not move them from the cart) but the image won't scale for mobile devices. Anyone have suggestions on how to get it to auto resize to scale to fit a mobile device? Or is there a way to have a different sized image for only mobile users?
Here are the two ways within the message only rule set up to get the images to resize:
I've gotten the message to pop up but I cannot figure out how to get the image to auto-resize to fit a mobile device but my knowledge of HTML and CSS are very basic (basically what I can learn from quick w3school.com references). Here are the two codes I tried:
---------------------------------------------------------------------------------------------------------------------
<a href="">michiganopera.org/.../" target="_blank">
<img src="">cdn.michiganopera.org/.../Covid-Safety-Signage-Updated-Horz-Version-800.jpg" alt="MOT/DOH Covid-19 Safety Plan">
</a>
---------------------------------------------------------------------------------------
<html>
<head>
<style>
img {
object-fit: contain;
}
</style>
</head>
<body>
<img src="">cdn.michiganopera.org/.../Covid-Safety-Signage-Updated-Horz-Version-800.jpg">
<a href="">michiganopera.org/.../" target=" _blank">
</body>
</html>
-----------------------------------------------------------------