Recent
Categories
View Replies (5)

Metropolis Logo Width Height not Responsive

0
Votes
Undo
  1. FCPeggy
    FCPeggy
  2. Sherlock Holmes
  3. Commercial Templates
  4. Monday, 11 July 2016
  5.  Subscribe via email
Hi, I love this forum.
I found part of the answer to my question from a previous post - to get my logo to be responsive to hand held devices with this custom code you provided:

@media only screen and (max-width: 534px) {
#logo {
background: white;
}
.logo > a {
background-size: 700px auto !important;
}
}

But I find the logo doesn't center horizontally but goes to the top of it's space. Is there an adjustment I can make so it actually centers from top and bottom too?

Many thanks for you help.
Responses (5)
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Hello

Would you have a URL to an example of the above screenshot?

Ciarán
  1. more than a month ago
  2. Commercial Templates
  3. # 1
FCPeggy
FCPeggy
Sherlock Holmes
Accepted Answer Pending Moderation
0
Votes
Undo
Hi,
This is a test build on my laptop - it's not online yet. Any ideas would be welcome or suggestions of what I could research would be appreciated. My only other thought would be to play with top, bottom adjustments - can this be done using a percentile?
  1. more than a month ago
  2. Commercial Templates
  3. # 2
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Hi

A bit of a shot in the dark this but maybe something like the following (Custom CSS field)...


h1.logo a {

    background-position: 50% 50% !important;

}


Ciarán
  1. more than a month ago
  2. Commercial Templates
  3. # 3
FCPeggy
FCPeggy
Sherlock Holmes
Accepted Answer Pending Moderation
0
Votes
Undo
Got it - thank you for you help!

Using the recommendation to use the Metropolis logo image installed at the root directory, I made sure my logo did not exceed the "Metropolis" logo image size. Then your added code to what I found centered within top and bottom space.

Again, EXCELLENT support. I will be purchasing more of your templates MOST DEFINITELY! Joomla51 Rocks!

.logo > a {
background-size: 700px auto !important;
}
h1.logo a {
background-position: 50% 50% !important;
}
  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
Excellent... thank you for the update and for sharing your final solution! :)

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!