Download
We're evolving to serve you better! This current forum has transitioned to read-only mode. For new discussions, support, and engagement, we've moved to GitHub Discussions.

Website logo on phone

  • #6706
    Avatar photo[anonymous]

    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!

    #6707
    Avatar photo[anonymous]

    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

    Screenshot-2021-12-23-172915

    Hope this helps!

    #6710
    Avatar photo[anonymous]

    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).

    #6712
    Avatar photo[anonymous]

    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!!

    #6713
    Avatar photo[anonymous]

    Great! It works.

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