Replace Large Desktop Image to mobile image

[Commodore]

I have a couple of very big images that look great on the desktop but cannot be read on mobile. Heres the link and the graphics below.

How can I get these images to ONLY show on the desktops but another smaller image created, or text if I must, on mobile/cell devices???

http://tyrspaladium.com/index.php?pages/guild-rules/

 

[Commodore]

 

[Commodore]

 

[Steve]

Remove all the inline CSS from the <img> tag and add this to your EXTRA.css

.node82 img {
        background-size: 100%;
        max-width: 100%;
        max-height: 100%;
}

 

[Steve]

Example of what it should look like after you make those changes.
iPhone 6 Plus View

 

[Commodore]

That looks great but my vertical view is squished too tight even on an Samsung 7 Edge. Landscape mode it looks great.

So what I did was place the code in extra.CSS.... but where do i find the inline CSS from the <img> tag?

 

[Steve]

It must be coming from where you created the page node HTML. It's going to be difficult to read on smaller devices, not much you can do really.