0
Welcome Guest! Login
0 items Join Now

SOLVED different logo sizes on desktop and mobile device

Last Post
Search Topic

  • SOLVED different logo sizes on desktop and mobile device

    Posted 10 years 9 months ago
    • Is it possible to use different sizes for the logo on desktop and mobile devices. I am using the Gantry 4.1.20 template with custom css.
      The logo I'm using has a width of 469 px and does'nt fit on a device that is less wide.
      I use ".logo-type-custom a {max-width: 100%;}" but that just cuts the sides of the logo image!
      See: 84.244.186.80/~joann/
    • Last Edit: 10 years 8 months ago by Henning.
    #1069943
    • Henning's Avatar
    • Henning
    • Preeminent Rocketeer
    • Posts: 29362
    • Thanks: 954
    • Volunteer

    Re: different logo sizes on desktop and mobile device

    Posted 10 years 9 months ago
    • I suggest to add this to your css
      a#rt-logo {
	-webkit-background-size: contain;
	-moz-background-size: contain;
	background-size: contain;
}
    #1069946

  • Re: different logo sizes on desktop and mobile device

    Posted 10 years 9 months ago
    • It does'nt make any difference
    #1069957
    • Henning's Avatar
    • Henning
    • Preeminent Rocketeer
    • Posts: 29362
    • Thanks: 954
    • Volunteer

    Re: different logo sizes on desktop and mobile device

    Posted 10 years 9 months ago
    • Just clear the cache of your browser ...
    #1069965

  • Re: different logo sizes on desktop and mobile device

    Posted 10 years 9 months ago
    • No luck
    #1070019
    • Henning's Avatar
    • Henning
    • Preeminent Rocketeer
    • Posts: 29362
    • Thanks: 954
    • Volunteer

    Re: different logo sizes on desktop and mobile device

    Posted 10 years 9 months ago
    • wich device/browser? It works for me ...
    #1070020

  • Re: different logo sizes on desktop and mobile device

    Posted 10 years 9 months ago
    • I think I did'nt make myself clear enough. The meaning is to use a different size logo on a phone. Because the one I use is to large. I am seeking a way to shrink the logo to fit in the device.

      On the Iphone both sides of the image are cut off.
      I guess it's better to use two modules with different sized logo images and then hide or reveal them on the proper device
    • Last Edit: 10 years 9 months ago by Cornelius123.
    #1070033
    • Henning's Avatar
    • Henning
    • Preeminent Rocketeer
    • Posts: 29362
    • Thanks: 954
    • Volunteer

    Re: different logo sizes on desktop and mobile device

    Posted 10 years 9 months ago
    • actually my line of css should just do that ... (see screenshot)
    • Last Edit: 10 years 9 months ago by Henning.
    #1070101
    • Roeland_A!'s Avatar
    • Roeland_A!
    • Preeminent Rocketeer
    • Posts: 10193
    • Thanks: 71

    Re: different logo sizes on desktop and mobile device

    Posted 10 years 9 months ago
    • Cornelius123,
      I loaded the site fine on my Iphone, the logo fits perfectly.

    • The following users have thanked you: Henning

    • *Karma comes in many forms, my personal favourite is the random saucepan from the sky* J.Spencer 17-02-2009
    #1070133

  • Re: different logo sizes on desktop and mobile device

    Posted 10 years 9 months ago
    • That is because I don't use the logo feature of the gantry template any longer. Added a custom module with just the logo image in it. The bootstrap css makes sure that it only takes 100% of the possible width. "img{width: 100%;}" But I really think the Gantry template should take care of this matter.

      The same for the mobile menu as a Selectbox. You have to add custom css to make it show up with ".gf-menu-toggle {z-index:99;}
    #1070263

Time to create page: 0.065 seconds