Tagged: ,

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #27067

    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

    #132612

    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

    #132613

    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

    #132614

    Any updates ?

    #132615

    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

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