Recent
Categories
View Replies (4)

Changing Header & Logo height in mobiles etc

0
Votes
Undo
  1. pearlyjones
    pearlyjones
  3. Commercial Templates
  4. Wednesday, 26 March 2014
  5.  Subscribe via email
The logo and head area of my site seems to have a large gap between them and the slideshow on mobile devices and my ipad mini.

i have added the Custom Css code:

@media only screen and ( max-width: 767px ) {
h1.logo a {
background-size: 400px auto;
}}

@media only screen and (max-width: 440px) {
h1.logo a {
background-size: 300px auto;
}}

And this in the custom code in the Responsive Options for Tablet Portrait, as my logo was still too large for my ipad mini:
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait)
and (-webkit-min-device-pixel-ratio: 1) {
h1.logo a {
background-size: 760px auto;
}}

But i am wondering what code will reduce the gap between the logo and the slideshow without messing up my main site, which I have done once this morning already, while seeing if I could find a fix! :laugh:
Responses (4)
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 this issue?

Ciarán
  1. more than a month ago
  2. Commercial Templates
  3. # 1
pearlyjones
pearlyjones
Accepted Answer Pending Moderation
0
Votes
Undo
Yes. it's http://www.lollapalooza-catering.co.uk

Have taken pics of my Blackberry screen. The ipad is doing it too but the gaps are not as massive. I think it may all be related to the other topic I've asked for help with as it has only just started doing it since I have been trying to sort the mobile view issue with CSS.
  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
Hello

Try adding the following to the Custom CSS field of your templates parameters..


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

#container_header {

    height: 200px;

}

#container_hornav {

    top: 120px;

}}


Ciarán
  1. more than a month ago
  2. Commercial Templates
  3. # 3
pearlyjones
pearlyjones
Accepted Answer Pending Moderation
0
Votes
Undo
Seems to have done the trick. Thank you!
  1. more than a month ago
  2. Commercial Templates
  3. # 4
  • Page :
  • 1


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