Responsive logo in header
 

Hello.

I have a question regarding the logo at the top if my website. I want it to be bigger for desktop screens since I want it to stand out. But on mobile screens it's too big (too wide) to fit on to most screens. Is there a way to make it responsive or to assign a different image for smaller screens?

Thank you.

Are you sure your are posting in product assigned forum?: Yes

What is your CMS version?: Joomla 3.x

MySQL Version: N/A

PHP version: N/A

Link to installation: www.viki.si

Have you edited any files? If yes tell us which ones.: No

Is this personal or client website?: Personal

Hello winnetouch.
You can add this to make the logo fit on mobile view.
@media screen and (max-width: 980px) {
#logoholder {
width:100%;
height: auto;
}
#logo{
width:100%;
background-position:center center;
background-size:contain;
}
}

For desktop view add this:
#logoholder {
margin: 0 auto;
float: none;
display: table;
}

But where do I add this to?

You can add this into your custom.css file
http://www.yjsimplegrid.com/document...-css-file.html

Well... All that did was center my logo... I copied your code in to the custom CSS file but it didn't work.

I set the float from none to left but the logo doesn't resize when I open the website on my phone.

Please notice that you have to clear cash and save inside template manager because your are using bootstrap3 and the old files are generated. After you hit clear cash and save it will generate new file with the changes.