Change or Remove a (Desktop) image when on viewed on Mobile

[UnvincibleGames]

Hi community and Weebly employees,

DESCRIPTION:

I am using images as kind of banner headers for my portfolio.   (www.briansturm.com)

These "headers" stay in permanence on every page to easily allow visitors to jump to my Recommendations / Published Work / Personal Projects (http://www.briansturm.com/recommendations.html).
But the larger "placard" images on the Landing page, are designed to be removed on purpose.

BUG / ISSUE EXPERIENCED:
My problem being that on mobile those "header" images do not resize, so as to stay in a horizontal line of three across as seen on Desktop.

But that causes every page, INCLUDING the Landing to be 90%-100% filled with these huge headers when viewed on mobile.
Not User Friendly!!    

EXPECTED RESULT:

I'd like to re-target those images to just smaller icons (see examples below). I really want to know how to re-target (or eliminate) any asset or elemnt when viewed on mobile.

USER INFO:

I am CSS/HTML & JS savvy (about 2nd year college student). I can zero in on the element in HTML, using Chrome's F12 diagnostic menu. I just can't seem to crack the "helpful" way Weebly obfuscates elements in JS, CSS.

PICS OR IT DIDN'T HAPPEN!

I've done QA, so I know visuals help
#1) Desktop screen version
#2) Bug / Problem currently

#3) Expected result     (Mock-Up)

===========================

IMGUR Pics: Desktop looks Okay / Bug - Problem / Desired Result (Re-target images when on mobile)

[Queso]

Hey there! It sounds like you've checked things out pretty thoroughly so far. Have you been able to check out how the images behave under a default Weebly theme? If it persists under that theme, it could really help narrow down what's going on, and let our team get to work on it.

[UnvincibleGames]

Sorry I haven't replied.
I tried to repro in a default theme, but the time investment to repro something, in another theme doesn't have any relevance to my request. But I did try for you...

REQUEST / QUESTION:

I simply need a way to assign a child class name to a drag-n-drop element (image, in this case).
You know, the standard website creation methodology. Add a sub-class to allow you to define a specific CSS for that child element.

ADDTIONAL INFO:
ALL of the drag-n-drop images in my website are auto-named by Weebly with this class name  ( wsite-image wsite-image-border-none )

So I need to hear from you how to simply assign ( wsite-image wsite-image-border-none-childNameHere ) to any drag-n-drop element I want. That's all I need

UGLY SOLUTION:

uh. Well...   One actual solution is to rip out the images in every single page (30+ pages...), and put them back in via the drag-n-drop "custom HTML/CSS" option. Which allows me to assign custom HTML (giving it a child class name) and a custom CSS (do not display when the viewport size detected is less than [x , y]).

It's just that... my fix is the exact opposite of what I pay weebly for.  To save me time, help me design pretty things.

REQUEST:

I know I've been a bit snippy...  Sorry.
Respectfully looking for a solution to simply assigning a child class name to a dragged in element.

[Adam7]

The way to do that would be to use Javasript/jQuery to dynamically find all img elements on the page and add the class to them. We don't provide assistance with that kind of coding, although I bet you could find something with a quick Google search. One of our Community members also might be able to provide some help.