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
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
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?
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
this is mobile version and it disapears i need it to appear smaller, will share code,
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:
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!
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 100×100 px and in resolutions below width of 480 it breaks:
I think you can adapt your image to any size easily without CSS media queries. Check this link
did not worked!
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.
how do i know that? i have this, 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
tried this: but did not worked; @media screen and (max-width: 768px) { .empresaImg div img { width: 100px; height: 100px; } }
<
Go check this out to use pictureFill for responsive images
would not be using pictureFill to be more complex whan using raw css?