Recent
Categories
View Replies (2)

Resizing Logo in Habitat template on mobile

0
Votes
Undo
  1. salinger
    salinger
  2. Sherlock Holmes
  3. Commercial Templates
  4. Tuesday, 30 September 2014
  5.  Subscribe via email
Hi,I like to have a smaller logo version on the phone portrait size. I found several postings and put this in the responsive phone portrait custom css:

/*This section scales the logo container to 310px on screens less than 440px to solve the horizontal scrolling problem */
@media only screen and ( max-width: 440px ) {
.logo_container, h1.logo, h1.logo a, #logo {
width: 310px !important;
}}

and this:

.logo span {
background-image: url("http://www.magenta.or.at/images/slogan-klein.png";);
background-repeat: no-repeat;
height: 76px;
width: 310px;
}
}

With the first version there was no change at all. with the second version the big logo disappeared but the small one didn't show up. Of course I checked the the path to the picture on the server, it is correct.

Do you have in idea? thank you, Marion
Responses (2)
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Marion

Could you try adding the 'http' to your URL.

Like so....


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

.logo span {

background-image: url("http://www.magenta.or.at/images/slogan-klein.png");

background-repeat: no-repeat;

height: 76px;

width: 310px;

}

}


Failing that could you try simply adding the following instead... 


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

.logo img {

    max-width: 100% !important;

}

}


Ciarán
  1. more than a month ago
  2. Commercial Templates
  3. # 1
salinger
salinger
Sherlock Holmes
Accepted Answer Pending Moderation
0
Votes
Undo
Thank you Ciaran, the 2nd version works perfectly!

Kind regards, Marion
  1. more than a month ago
  2. Commercial Templates
  3. # 2
  • Page :
  • 1


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