Recent
Categories
View Replies (5)

Nocturne Template - Responsive Logo

0
Votes
Undo
  1. joomlagal
    joomlagal
  3. Commercial Templates
  4. Saturday, 14 September 2013
  5.  Subscribe via email
I created a website for my client and inserted a logo that was centered in the middle of the page. (I changed the size of the from 500 to 950 in the nexus.css to have the logo fit, I did try leaving the settings and positioning the logo with the X and Y but that didn't seem to work either.)

Everything looks great except on a mobile phone, the logo does not shrink properly. Is there something I can do to have the logo be responsive?

Website: http://www.onemanstreasure.ca
Responses (5)
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Hello

May I suggest the following tutorial which details how to re-size your logo image on smaller screen devices... http://www.joomla51.com/tutorials/item/re-sizing-your-logo-for-smaller-screen-devices

Ciarán
  1. more than a month ago
  2. Commercial Templates
  3. # 1
joomlagal
joomlagal
Accepted Answer Pending Moderation
0
Votes
Undo
Thanks, I added the portrait coding to my custom area but something is still a little odd, now I have a smaller logo but about an inch of space between my logo and my menu when the page is viewed on a mobile device.

Is there anyway to decrease this 1 inch space? website http://www.onemanstreasure.ca
  1. more than a month ago
  2. Commercial Templates
  3. # 2
JohnO
JohnO
Accepted Answer Pending Moderation
0
Votes
Undo
Hello,

I see the issue you are having in mobile potrait.

Please try the following solution
Open the responsive.css file located in the templates css folder.
Copy and paste the following code to the bottom of the file and save


/* Mobile (Portrait) */

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

h1.logo a {background-position: center center; background-size: 120% 100%;}

}
  1. more than a month ago
  2. Commercial Templates
  3. # 3
bludove
bludove
Sherlock Holmes
Accepted Answer Pending Moderation
0
Votes
Undo
Hi:
I followed the information here in this thread. However I used the x-position and set to 400. I used the code you said to put into the responsive CSS but that didn't seem to do anything.

How can we make the logo centered no matter what device it shows up on?

http://www.smokymountaindefense.com/

Thanks
  1. more than a month ago
  2. Commercial Templates
  3. # 4
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Bluedove

To center could you try adding the following to the Custom CSS field of your templates parameters...


#logo {

    width: 100%;

}

.logo a {

    left: 50%;

    margin-left: -150px;

}


Ciarán
  1. more than a month ago
  2. Commercial Templates
  3. # 5
  • Page :
  • 1


There are no replies made for this post yet.
Be one of the first to reply to this post!