How to make inStyle Logo Responsive

Hello,
I am currently using the inStyle template wherein I have created a logo file which has dimension of 1280x200. It works perfectly fine on normal screens, however it is not rendered properly on mobile devices. How can I make it responsive for mobile devices.

Alternatively, if I reduce the logo size to for eg: 400x109, it floats towards left rather than be centrally aligned, However, this setting works perfectly fine for mobile devices.

Any help regarding either of the above scenarios will be much appreciated.
I am currently using the first option as logo (1280x200)

My Link for website is : http://conceptenergyintl.com/bds/

Hi,
there are few solutions,
one of them:
1) Use CSS logo (mode) - and replace with your logo
2) In override.css and mobile.css, small.desktop.css, tablet.css - use @media only screen and (max-width: .... - rules
and set different logo size for screen size.

In my opinion your logo image include too many elements. Colorful element on top should not be part of logo.

p.s.
You forgot about changing favicon.ico - default joomla looks not professional.

p.s.
Disable also "Style switcher": https://www.gavick.com/documentation/un ... work-logo/ - this is good only for DEMO.

Thank you for your feedback and comments. I had given the demo link for submission and it is actually not the final version of site and some things were still pending on that installation.

I have convinced others to let go of the top banner and stick with the logo itself. It is working fine as it is supposed to.

As a personal query I wanted to know if there are other ways to make the top logo image responsive if you have a full length image i.e with 1280px width. I tried the css overide options and it didn't seem to work for me.

I would highly appreciate if there could be a solution to this query.

Regards

You can also set different logo for different screen size using
@media only screen and (max-width: 480px) {....}
@media only screen and (max-width: 840px) {....}
if you're using CSS logo type.
The main problem in you case is.. logo is very wide.

can you be more specific...like EXACT codes to replace or fix the current code...for those of us who don't know the code, it's very hard...besides...there should be some consistency in the design...some templates have it in the backend of the template to change the mobile logo...others don't...this is the one that doesn't have that option & it's very frustrating...with that being said, here's the code in the mobile.css...I have no idea what to modify:
@media only screen and (max-width: 320px), only screen and (max-device-width: 320px) and (-moz-max-device-pixel-ratio: 1.5), only screen and (max-device-width: 320px) and (-o-max-device-pixel-ratio: 1.5/1), only screen and (max-device-width: 320px) and (-webkit-max-device-pixel-ratio: 1.5), only screen and (max-device-width: 320px) and (max-device-pixel-ratio: 1.5), only screen and (max-device-width: 640px) and (-moz-min-device-pixel-ratio: 2), only screen and (max-device-width: 640px) and (-o-min-device-pixel-ratio: 2/1), only screen and (max-device-width: 640px) and (-webkit-min-device-pixel-ratio: 2), only screen and (max-device-width: 640px) and (min-device-pixel-ratio: 2) {
#gkMainbody table {
width: 260px!important;
}
}

@media only screen and (max-width: 480px) and (orientation:landscape), only screen and (max-device-width: 480px) and (-moz-max-device-pixel-ratio: 1.5) and (orientation:landscape), only screen and (max-device-width: 480px) and (-o-max-device-pixel-ratio: 1.5/1) and (orientation:landscape), only screen and (max-device-width: 480px) and (-webkit-max-device-pixel-ratio: 1.5) and (orientation:landscape), only screen and (max-device-width: 480px) and (max-device-pixel-ratio: 1.5) and (orientation:landscape), only screen and (max-device-width: 960px) and (-moz-min-device-pixel-ratio: 2) and (orientation:landscape), only screen and (max-device-width: 960px) and (-o-min-device-pixel-ratio: 2/1) and (orientation:landscape), only screen and (max-device-width: 960px) and (-webkit-min-device-pixel-ratio: 2) and (orientation:landscape), only screen and (max-device-width: 960px) and (min-device-pixel-ratio: 2) and (orientation:landscape) {
#gkMainbody table {
width: 420px!important;
}
}

You can also set different logo for different screen size using
@media only screen and (max-width: 480px) {....}
@media only screen and (max-width: 840px) {....}
if you're using CSS logo type.
The main problem in you case is.. logo is very wide.

there should be some consistency in the design..

I agree, but it's like ping-pong with wall.

Using so many rules it's nightmare of any web-developer.
It's to better have 2-3 styles default big (desktop), smaller for tablets and smallest for smartphones.
But if you have looooooong logo, sorry it's how it's.