Hello there! Welcome to Youjoomla Support Forums

We are Web Development Company specializing in Joomla Templates , Joomla Extensions and WordPress Themes development . You are not able to see some forum threads due to your memberhip level. To unlock all forums and special customer support please take few moments to signup . If you are just searching for free joomla templates , or free joomla extension support simply head to our Free Joomla Support forums and open a new thread. Our moderators will help you as soon as possible. To spead up the response time please take few seconds and go over forum rules

Have fun!

Responsive logo in header

06-14-2015, 10:03 AM
# 1 (permalink)
winnetouch
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
06-15-2015, 06:39 AM
# 2 (permalink)
arefund
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;
}
Kindness costs the least, but is worth the most!
06-26-2015, 02:58 PM
# 3 (permalink)
winnetouch
But where do I add this to?
06-29-2015, 01:06 PM
# 4 (permalink)
arefund
You can add this into your custom.css file
http://www.yjsimplegrid.com/document...-css-file.html
Kindness costs the least, but is worth the most!
06-30-2015, 05:51 PM
# 5 (permalink)
winnetouch
Quote:
Originally Posted by arefund
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.
07-02-2015, 06:28 AM
# 6 (permalink)
arefund
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.
Kindness costs the least, but is worth the most!
Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Powered by vBulletin®
Copyright ©2000 - 2017, Jelsoft Enterprises Ltd.

Members Login

Username
Password