• 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]

CyberAP

Well-known member
#1
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
#6
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
#7
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.