How to make logo responsive on mobile devices?

Hi,

As subject, I tried to customize the magazine logo to my own logo.
the problem is my logo not responsive on mobile devices.
this is my unfinished site www.wangblagak.com
this is responsive test for my site http://responsivetest.net/#u=p|320|480| ... lagak.com/
it looks good on large screen monitor such as PC, laptop and big screen devices but too big (huge) on small mobile devices.
Is there any way to customize it?

thanks,
wangblagak

HI
You have funny logo, like from 90's
I see two solutions:
1) Use different logo for mobile view (then will take less kb to load)
http://css-tricks.com/snippets/css/medi ... d-devices/

2) Or make your logo responsive , read here few tips
http://webdesignerwall.com/tutorials/5- ... ive-design
http://css-tricks.com/on-responsive-images/

little css or html modifications needed.
access to this file: templates/gk_magazine\layouts\default.php may be useful.

Hi Pawel,

Thanks.
I love this template, It makes me comfortable to see it.
simple, clean and eye catching design.
I'll try it and further questions will be follow.

wangblagak

HI
You have funny logo, like from 90's
I see two solutions:
1) Use different logo for mobile view (then will take less kb to load)
http://css-tricks.com/snippets/css/medi ... d-devices/

2) Or make your logo responsive , read here few tips
http://webdesignerwall.com/tutorials/5- ... ive-design
http://css-tricks.com/on-responsive-images/

little css or html modifications needed.
access to this file: templates/gk_magazine\layouts\default.php may be useful.

Hello there,

I'll tried many times your suggest tricks but nothing happened on it logo.
I really leak of this.

Because all this solutions require a slight modification of the code.
Do you create two logo images - small and standard ?

Ok, let's do it easy way:
1) Prepare small logo - 300px width, copy to gk_magazine/images

logo300px.png

2) Open in Editor two files:
gk_magazine/css/small.tablet.css
and
gk_magazine/css/tablet.css

3) Insert on the bottom of both files this css style:

Code: Select all

#gkLogo.cssLogo {
   background: transparent url('../images/logo300px.png') no-repeat 0 0;
   height: 65px;
   margin: 0;
   width: 300px;
}

Ok, let's do it easy way:
1) Prepare small logo - 300px width, copy to gk_magazine/images

logo300px.png

2) Open in Editor two files:
gk_magazine/css/small.tablet.css
and
gk_magazine/css/tablet.css

3) Insert on the bottom of both files this css style:

Code: Select all

#gkLogo.cssLogo {
   background: transparent url('../images/logo300px.png') no-repeat 0 0;
   height: 65px;
   margin: 0;
   width: 300px;
}

awesome, it's worked!
thanks

Uff, nice to heard that after so many posts
There always few method to get right solution.