Display a different image when my website is viewed from a mobile/tablet

Site URL: https://solvsdesign.com/

Hello everyone,

I hope someone can help me. Here's the problem with my website:
There are 2 images on my website that when viewed from a mobile or a tablet become way too small to be balanced(resulting in a disproportion with the surrounding elements) and also too small to read.
I'd like to know if there is any way(even through css injection) I can set the website so that when browsed from a smaller device(less than 900px?) instead of resizing the existing img, it retrieves a different img specifically re-arranged for the smaller available space.

Here's my website https://solvsdesign.com/
The first image is right there under the heading. It's the text "floating" above the ink splash video. Just a png text with a transparent bg.

Second image is right under the profile photo, the one that says "Quod facio, Valde facio". Same as above, png text with transparent bg.

Thanks in advance for any help and my apologies for my subpar english 🙂

 

Hi. Can you take a screenshot 2 images? We can check easier

7 hours ago, tuanphan said:

Hi. Can you take a screenshot 2 images? We can check easier

Thanks for your help

This code for first image

Try adding t oDessign > Custom CSS

@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1634566319563_3329 .has-aspect-ratio {
    padding-bottom: 50% !Important;
}
}