0
Welcome Guest! Login
0 items Join Now

SOLVED Logo pixelates on mobile

Last Post
Search Topic
    • ianmol100's Avatar
    • ianmol100
    • Hero Rocketeer
    • Posts: 275
    • Thanks: 1

    SOLVED Logo pixelates on mobile

    Posted 8 years 10 months ago
    • Hi RT,

      The logo on one of out websites pixelates when we view on mobile. Any solution to this?

      We are using Joomla 3.5.1 and Gantry 5.2.18
    #1302243
    • DanG's Avatar
    • DanG
    • Preeminent Rocketeer
    • Posts: 36750
    • Thanks: 3229
    • Custom work done

    Re: SOLVED Logo pixelates on mobile

    Posted 8 years 10 months ago
    • If this is a site that is online (just installed, dev or live) could you please supply a link in the Public Tab or email it to me at xxx so I can better diagnose the issue?
      It makes our suggestions more accurate if we see the actual coding of your site.
    • Last Edit: 8 years 10 months ago by Kat05.
    #1302322
    • DanG's Avatar
    • DanG
    • Preeminent Rocketeer
    • Posts: 36750
    • Thanks: 3229
    • Custom work done

    Re: SOLVED Logo pixelates on mobile

    Posted 8 years 9 months ago
    • This is because your logo is a small GIF and looks fine on a desktop at its native dimensions. However in mobile mode Gantry widens that container to a 100% to follow responsive guidelines so your low quality image gets scaled and thus looks pixellated.

      To force the logo container back to native image dimensions, in your [JOOMLA-ROOT]/templates/rt_ambrosia/custom/scss/custom.scss (<--CLICK this is link) file add this:
      @media only all and (max-width: 47.938rem) {
    #g-header .g-logo img {
        width: 70%;
    }
}
    #1307418

Time to create page: 0.074 seconds