Solution 1 :

You problem is here:

@media screen and (max-width: 480px) {
    .inicioEmpresaInfo .empresaImg {
        display: none;
    }
}

At this size, empresaImg (the container of the image) become hidden

Solution 2 :

Try giving the image padding and or margin in the CSS:

@media screen and (max-width: 1366px)
.empresaImg div img {
    width: 95%;
    padding: 25px 25px 25px 25px;
}

This may force the image to fit in the screen. Otherwise you will need to look into conditionally rendering different sizes of the image depending on screen size. Check here for answers on that.
How to conditionally resize image if screen not wide enough, with CSS?

Problem :

the image is dissapearing when switch to mobile version i will share code for resolution, the solver will earn reputation and answer will be marked as solution

minimal reproducible example here : minimal reproducible example click

images of the problem here:

this is the image disapearing

this is desktop version

enter image description here

this is mobile version and it disapears i need it to appear smaller, will share code,

enter image description here

html:

<section class="inicioEmpresa wow fadeInLeftBig data-wow-delay="0.4s"">
        <div class="inicioEmpresaInfo">
            <div class="empresa">
                <div class="empresaImg">
                    <div class="wow bounceInLeft" data-wow-delay="0.3s"><img src="images/home/home-2.png" alt=""></div>
                </div> 
                <div class="inicioEmpresaTxt wow fadeInUp" data-wow-delay="0.3s">
                    <h1 class="color">RADISOL M.X.</h1>
                    <h1 class="color">Más de 20 años de trayectoria.</h1>
                    <p>Somos especialistas en las soluciones integrales de los problemas del sistema de enfriamiento de
                        automotores y maquinaria pesada, ofreciendo al cliente el mayor abanico de posibilidades para
                        abastecer todas sus necesidades.</p>
                        
                </div>
            </div>
        </div>
    </section>

css:
you can see with f12 or element inspector of chrome or mozilla, here is a screenshot showing the elements applied to such image:

enter image description here

css code applied to the image:

@media screen and (max-width: 1366px)
.empresaImg div img {
    width: 95%;
}
.empresaImg div img {
    width: 100%;
    border-radius: 5%;
}

also saw this, when you change the resolution in >element inspector > mobile icon click > resize from 488 x 625 screen (the image will appear) but when i change from 488 x 625 to 480 x 625 the image will disappear!

still appear
enter image description here

the image dissapears

enter image description here

how to make it not dissapear and make it responsive for mobile version?

edit: tried this but did not worked:

 @media screen and  (max-width: 768px) {
    
    .empresaImg div img {
        width: 100px;
        height: 100px;
        
    }
}

problem solving answer will be upvoted and earned rep

also tried this: https://www.w3schools.com/howto/howto_css_image_responsive.asp

.empresaImg div img {
    width: 100%!important;
    height: auto!important;
}

but did not worked still disappearing in < = 480px resolutions

here is the responsive css in charge of making it responsive, i do not know where is the error also tried to forcing the image to be 100×100 px and in resolutions below width of 480 it breaks:

https://clever-curie-f9c77b.netlify.app/css/responsive.css

Comments

Comment posted by w3schools.com/howto/howto_css_image_responsive.asp

I think you can adapt your image to any size easily without CSS media queries. Check this link

Comment posted by className

did not worked!

Comment posted by dgurtner

What are the widths of the containers that are holding the image? It may be that you’ve accidentally assigned a width to one of those containers that is larger than the width of the screen so the image may break because of the width. Also you may want to look into using flex to arrange the way the content areas stack in mobile vs desktop.

Comment posted by clever-curie-f9c77b.netlify.app/css/responsive.css

how do i know that? i have this, here is the responsive css in charge of making it responsive:

Comment posted by className

i do not know where is the error, also tried to forcing the image to be 100×100 px and in resolutions below width of 480 it breaks

Comment posted by className

tried this: but did not worked; @media screen and (max-width: 768px) { .empresaImg div img { width: 100px; height: 100px; } }

Comment posted by stackoverflow.com/questions/23964481/how-to-use-picturefill

<

Comment posted by NicoloCode

Go check this out to use pictureFill for responsive images

Comment posted by className

would not be using pictureFill to be more complex whan using raw css?

By