image and carousel not responsive bootstrap5.2

Question

I have a problem of responsiveness. When I open my website on the phone, the icon images that I put in the <i class="img-fluid material-icons"> tag disappear while they are visible on the computer. I tried to add img-fluid from bootstrap but it doesn't work on it I don't understand why. On this link you can see all the code in full https://jsfiddle.net/z3hx2Lcr and in this link you can see result https://testportfolio111.000webhostapp.com/ I also have a responsivity problem in the carousel since I put the text effects in it. When I open the site on my phone the carousel goes down, I tried to fix this problem but I can't. Can anyone give me the solution?

Answer 1

there is a problem on your bottom sections, the element with class.skills-bar break the page and caused gap from right because it has fixed width value so change it to this code

.skills-bar {
  width: 100%;
  max-width: 600px;
}

and in the container which your icons are change this in mobile version instead of

<div class="col animationtextinleft"></div>
<div class="col"></div>
<div class="col animationtextinright"></div>

use this

<div class="col-12 animationtextinleft"></div>
<div class="col-12"></div>
<div class="col-12 animationtextinright"></div>

about your slider: your.carousel-item has height: 100vh change it to height: auto in mobile version and the reason why it's text is not showing is these slides(carousel-caption) get the class d-none