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 :

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

html:

<section 0.4s"">
        <div >
            <div >
                <div >
                    <div  data-wow-delay="0.3s"><img src="images/home/home-2.png" alt=""></div>
                </div> 
                <div  data-wow-delay="0.3s">
                    <h1 >RADISOL M.X.</h1>
                    <h1 >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:

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

the image dissapears

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 100x100 px and in resolutions below width of 480 it breaks:

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

CodePudding user response：

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

CodePudding user response：

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?