Tagged: ,

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • August 1, 2013 at 6:49 pm #27067
    lephenix

    Hi there,

    The header of my site looks great when viewed on a desktop but when loaded on a mobile device the layout breaks eg:

    5pr3b7.jpg

    This is my site:

    http://www.lephenix.co.uk

    What I wanted to know was if there was a way to fix this and have these elements displayed all on one line ?

    Thanks in advance

    Ed

    August 2, 2013 at 4:06 am #132612
    Ismael

    Hi,

    This will fix the header a bit. Add this on your custom.css or Quick CSS

    @media only screen and (max-width: 767px) {
    
.responsive #header .social_bookmarks {
    
width: 100px;
    
float: left;
    
}
    

    
.responsive.social_header .phone-info {
    
text-align: right;
    
padding-top: 10px;
    
}
    

    
.responsive #header .sub_menu, .responsive #header_meta .sub_menu>ul {
    
float: right;
    
text-align: right;
    
margin: 0 auto;
    
position: static;
    
display: block;
    
width: 150px;
    
}
    
}

    Regards,

    Ismael

    August 2, 2013 at 6:58 pm #132613
    lephenix

    Hi Ismael,

    That seemed to improve things a lot, but the elements are still not all on one line, do you know if this would be possible ?

    2vt5j07.png

    Thanks

    Ed

    August 5, 2013 at 9:49 pm #132614
    lephenix

    Any updates ?

    August 7, 2013 at 7:16 am #132615
    Dude

    Hi!

    You can try following css code

    @media only screen and (max-width: 767px){
    
.responsive.social_header .phone-info {
    
float: right;
    
margin-top: -21px;
    
}
    

    
.responsive #header .social_bookmarks {
    
float: left;
    
width: auto;
    
}
    

    
}

    Regards,

    Peter

  • Author
    Posts
Viewing 5 posts - 1 through 5 (of 5 total)
  • The topic ‘Header not rendering correctly in responsive view’ is closed to new replies.