Responsive Logo Question

[zarenya]

In the site build using Dreamweaver, I would like to make the logo responsive.

I have two logos: LOGO.png (for tablet device and desktop) and mobilelogo.png (for smaller devices-phone)

Could any of you kindly advise me how to specify the correct css for when a mobile phone views the website.

 

The demo site can be viewed here.

 

http://naturalhealtherapist.co.za/Demo/

 

Assistance will be greatly appreciated.

[falkencreative]

Probably the easiest way would be to make the logo a background image on your .logo h1, rather than using an img tag. Then, you can easily switch between the two versions of the logo by using media queries targeting device width.

[zarenya]

I have tried your technique explained but still get stuck. Do you think you would be able to point me to a tutorial on how to make this work?

[falkencreative]

well, what have you gotten so far? Where are you getting stuck?

[kralcx]

Here's a video for you: Responsive Web Design for Noob's

 

[administrator]

You may want to take a look Twitter Bootstrap - now the shameless plug:

 

http://www.killervideostore.com/video-courses/twitter-bootstrap.php

 

 

Stef