I did some CSS and wonder, how to auto resize like the left logo and fit on mobile view?
I appreciate if advise me some CSS style when resize the screen.

Many thanks
Sarah

This is a customization that goes beyond the regular support.
The normal logo uses quite a few lines of code to behave the way it does.
It gets resized according to the header size, it gets substituted with the transparent logo according to whether the page is transparent or not, it behaves differently on mobile devices etc.
You can find the JS responsible for the resizing in the js/common.js file:

	// Get default logo calculated width
	preloadImages($("#logo a>img"), function () {
		var logo_w = $('#logo a>img').width();
		$('.logo_img').attr('initital_width', logo_w);
		// Set retina logos if set 
		if (window.devicePixelRatio >= 2) {
			if(retina_logo_url != ""){
				$(".logo_img > a > img").css("max-width", logo_w).attr("src", retina_logo_url);
			}
			if(retina_logo_transparent_url != ""){
				$("#transparent_logo > img").css("max-width", logo_w).attr("src", retina_logo_transparent_url);
			}
		}
	});

You can try to duplicate that for your image but the proper IDs and classes need to be changed. Also make sure you set things correctly for the mobile versions, currently things get pretty messy there!
Good luck!

We are currently fully booked for custom work, sorry.