Responsive logo to screen size

[Segmant]

Hi Livemesh, me again!!

I think this is my last stumbling block, I design on a 27″ iMac but now am testing on other devices and the custom logo ive used takes over the smaller screen sizes.
Is there a way i can make the custom logo i’ve used responsive to the different screen resolutions? I’ve used custom CSS in the header file for the logo, not the theme options.

On a 13″ macbook the header takes over half the page, same with the iPad and other similar sized tablets. Can i get the CSS to swap the image depending on the device or resize it?

Thanks

Chris

[Veena]

Pls send me the site URL, so that I can take a look and send you the solution for this.
Thanks!

[Segmant]

Hi Pheonix

Site is currently in testing stage on my own dev site, http://segmant.co.uk/springparc/

Thanks

Chris

[livemesh]

Hi Chris,

When I resize my browser, I see that the logo size is changing appropriately. But if you want to insert any of your custom responsive behavior for logo then here is the template to do that

/* -------------------- Responsive behavior styling ---------------------- */

@media only screen and (max-width : 1024px) {
	
	/*Below is the template. Replace with your styles */
	.myDiv { mystyle: value; } 
    
    }

@media only screen and (max-width: 767px) {

    }

@media only screen and (max-width: 479px) {

    }

Please put the code in the “Custom CSS” tab of the theme options. Thanks!

[Author]

Posts