1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Making your logo responsive [Deleted]

Discussion in 'Tips and Guides' started by CyberAP, Jun 26, 2013.

  1. CyberAP

    CyberAP Well-Known Member

    CyberAP submitted a new resource:

    Making your logo responsive - Making your logo play nicely on mobile is just a matter of a couple minutes

    Read more about this resource...
    Shelley likes this.
  2. Shelley

    Shelley Well-Known Member

    I did my logo earlier but I'm liking the other route you took so stealing that from you in your guide. :p Again, excellent work and thanks for posting such a useful guide. (y)
    CyberAP likes this.
  3. Moddis

    Moddis Active Member

    Awesome thanks! The second option is definitely what I need.
    Shelley likes this.
  4. CyberAP

    CyberAP Well-Known Member

    Hmmm, I thinking of making another addon right now :)
    Shelley likes this.
  5. sweetpotato

    sweetpotato Active Member

    Nice, I will choose the first option :D
  6. Moddis

    Moddis Active Member

    Ok, so this is what i was trying to do but having some issues:

    The header normally looks like this: upload_2013-6-25_21-29-10.png

    That is ok but on a mobile screen, even though the header logo fits in fine width-wise, it just takes up way to much space:

    So I tried to use the following variation of the code to shrink the header size to 50% if the screen width is small:
    @media (max-width:@maxResponsiveNarrowWidth)
    #logo img {width: 50%;}
    However, it does nto make much difference unless I move the navignation up closer to the logo which I cant really figure out how to do yet...

  7. CyberAP

    CyberAP Well-Known Member

    Check out the last piece of code in resource description.
  8. Moddis

    Moddis Active Member

    thanks, will be playing with that for a bit.

    BTW, as is, it kept giving me an invalid math expression until I removed the px next tot he 40 in:
    "height: {xen:calc '40px + @headerTabHeight * 2 + 2'}"
    CyberAP likes this.
  9. CyberAP

    CyberAP Well-Known Member

    Whoops, my bad. That's fixed now!
  10. CyberAP

    CyberAP Well-Known Member

    This resource has been removed and is no longer available for download.
  11. CyberAP

    CyberAP Well-Known Member

Share This Page