Hello:
On my page, I have a pair of arrows at the left and right side of enlarged images. When the arrows are clicked, the open image advances to the next enlarged image. The arrow size on desktops and laptops is fine. However, after applying the following rule to the smartphone media query, each arrow image remains large and doesn't scale.
right-arrow.svg { height: auto !important; width: auto !important; max-width: 100%; }
Would one of you please suggest the appropriate media query declaration(s) to use so that the arrows scale when viewed on various sizes of smartphones?
Thank you.
Here's the page: http://www.warrencampdesign.com/blog/galleryMasonry/skiesDayNight.html
My external style sheet: http://www.warrencampdesign.com/blog/css/blog.css
Click any thumbnail to enlarge it; the arrows will become visible on the enlarged image.
Warren