0
Welcome Guest! Login
0 items Join Now

SOLVED prevent logo from resizing

Last Post
Search Topic

  • SOLVED prevent logo from resizing

    Posted 8 years 5 months ago
    • Greetings,

      I love Gantry 5. Super well-done. Even custom CSS is easier and faster.

      I am wondering how I can prevent the logo from resizing. I've sized my logo for the phone, and want to keep it at that size on all devices. But there is a breakpoint at which the logo gets really small and fuzzy, then pops back up to a larger size once I'm on the phone.

      My problem seems to be the iPad mini, or the iPad vertical. Right about that screen size, the logo is reduced too much. I tried to set the block size to fixed, but it doesn't seem to help. I tried setting a width for the logo in custom CSS media query, but I'm not ablet o get it to work.

      I appreciate any tips you are willing to offer.

      Thank you!
    #1253134

  • Re: SOLVED prevent logo from resizing

    Posted 8 years 5 months ago
    • Hello and thank you for the kind words.

      The simplest way to prevent the auto responsiveness of an image is via CSS. Edit the custom.scss file and add the following rule:
      .gantry-logo img {
    max-width: inherit;
}

      This will force the logo to always fit its natural size. Of course you can also decide to have it forced at a minimum size. For instance if you want the logo to always be at least 100px, you could say:
      .gantry-logo img {
    min-width: 100px;
}
    • / Djamil Legato / Lead Developer /
    #1253146

  • Re: SOLVED prevent logo from resizing

    Posted 8 years 5 months ago
    • Thank you so much for sending me in the right direction. Indeed I was using .gantry-logo without specifying img. I guess I am forever learning the specifics.

      Thanks again!
    #1253414

Time to create page: 0.035 seconds