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:
    upload_2013-6-25_21-31-24.png

    So I tried to use the following variation of the code to shrink the header size to 50% if the screen width is small:
    Code:
    @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...

    upload_2013-6-25_21-37-17.png
     
  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