Timo Timo - 10 months ago 109
CSS Question

Mobile Chrome browser displays different than other mobile browsers

I am trying to build a responsive webpage with this image of the cover of Mr Robot. It actually does work, only the mobile Chrome browser makes trouble.

As you can see on the second image below, the cover image is slightly hanging over the right end of the screen and I don't know why.
Does someone has a clue why Chrome is making trouble in this case?

Here's the code I used:

HTML

<div class="wrapper">
<img src="..." class="cover">
</div>


CSS

.wrapper img.cover {
max-height: 100%;
max-width: 100%;
text-align: center;
}


How it looks on Safari, Firefox and Opera:

How it looks on Safari, Firefox and Opera

How it looks on Chrome:

How it looks on Chrome

Thank you!

Answer Source

Try this one

.wrapper{
  width: 100%;
  padding: 15px;
  box-sizing: border-box;
}
.wrapper img{
  max-width: 100%;
  height: auto;
}
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download