[clac1]

Hello,

I added a logo (300 pixels wide) to my website.
On a smartphone, the logo is displayed very large : http://jouet.click-clack.fr
Did I make a mistake somewhere?

Thanks for your help!

[chris]

Try setting a max-width on the image, with a height of auto.

Since it’s the only image in your header, you could assign CSS like this…

header img {
  max-width: 20wv;
  height: auto;
}

Here’s a screenshot from Chrome’s dev tools

Hope this helps!

[clac1]

Hello,

Thank you for your answser.

I put in place the custom CSS code. And I try several max-width until 5wv, but the image is always so big when the page is displayed on a smartphone (see screenshot).

[chris]

Looked at it again in Chrome dev tools, and inspection indicates an invalid property value. My bad!

Try using % instead of vw, like so:

header img {
  max-width: 30%;
  height: auto;
}

Sorry for the error!!

[clac1]

Great! It works.

Many thanks and I wish you a Merry Christmas and happy new year !

[Author]

Posts