icon image doesn't follow size style on ios mobile devices-CodePudding

I have 2 icon images that display ok on PC and android devices - proper size. But on iOS mobile devices, icons are smaller. I use Chrome to test web pages.

css:

 #info-icon, #info-icon-1 {
      height: 40px;
      width: 40px;
      max-width: 100%;
      margin: 10px;
      padding: 5px;
      display: none;
      position: absolute;
      right: -60px;
      top: -10px;
    }

HTML

        <div id="info-icon">
          <button type="button"  @click="openPopHelp">
            <img alt="" width="40" height="40" src="{% static 'images/help_icon.png' %}" />
          </button> 
        </div>

What to do to make icons be proper size 40x40 on ios devices?

CodePudding user response：

try this

#info-icon, #info-icon-1 {
      height: 40px!important;
      width: 40px!important;
      max-width: 100%;
      margin: 10px;
      padding: 5px;
      display: none;
      position: absolute;
      right: -60px;
      top: -10px;
    }

       <div id="info-icon">
          <button type="button"  @click="openPopHelp">
            <img alt="" width="40px" height="40px" src="{% static 'images/help_icon.png' %}" />
          </button> 
        </div>

CodePudding user response：

The problem was that I set style to images through parent div. It works for PC and android devices but ios mobile devices are much picky. I changed:

 #info-icon, #info-icon-1 {
  height: 40px;
  width: 40px;
  display: none;
  position: absolute;
  right: -40px;
  top: -10px;
}
.icon-img{
  height: 35px;
  width: 35px;
  min-height: 100%;
  min-width: auto;
  margin: 10px;
  padding: 5px;
}

And in HTML:

           <div id="info-icon">
              <button type="button"  @click="openPopHelp">
                <img alt="info icon"  width="35" height="35" src="{% static 'mifit/images/help_icon.png' %}" />
              </button> 
            </div>