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!

Site Links

Recommended

Join Our Newsletter

* indicates required
We respect your privacy and do not tolerate spam and will never sell, rent, lease or give away your information (name, email, number, etc.) to any third party. Nor will we send you unsolicited email.
Joomla51 - Mullaghmore, Co. Sligo, Ireland
Joomla51.com is not affiliated with or endorsed by the Joomla! Project or Open Source Matters.
The Joomla! name and logo is used under a limited license granted by
Open Source Matters the trademark holder in the United States and other countries.

We use cookies on our website. Some of them are essential for the operation of the site, while others help us to improve this site and the user experience (tracking cookies). You can decide for yourself whether you want to allow cookies or not. Please note that if you reject them, you may not be able to use all the functionalities of the site.

Ok