Making your logo responsive [Deleted]

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

So, your logo is too wide or too small for mobile layout. We can fix that with a little help of a magical media-queries.

There are 2 options how to handle responsive logo:

  1. Scale the logo or align it.
  2. Replace the logo entirely.
All the code below should be placed in EXTRA.css.

First option

Scaling our logo to page's maximum width.

Code:
#logo img
{
  max-width: 100%;
  height: auto;
  width: auto;
}
Aligning logo to the center on mobile...
Read more about this resource...
 

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
 

CyberAP

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

The header normally looks like this:View attachment 49921

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:
View attachment 49922

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...

View attachment 49923
Check out the last piece of code in resource description.
 

Moddis

Active member
Check out the last piece of code in resource description.
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

Well-known 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'}"
Whoops, my bad. That's fixed now!
 
Top