Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #19738

    Socialhouse.lebnani.com

    two things i’m trying to accomplish…

    1. I need the logo to be horizontally centered in the header.

    2. The logo needs to be responsive.

    I got the logo to be where i want it by changing its position to absolute and using left: 200px; so that part of the logo would be overlaying the slider. This worked fine on desktop browsers but then i looked on my phone and nexus and it was all different and screwed up..

    How do i make the logo act like the rest of the page. Responsively.

    Thanks a lot!

    #104782

    Hi,

    You can refer to css > layout.css for responsive css, example is this

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

    /*logo and menu*/
    #top .logo{float:none; margin:0 auto; display: block; text-align: center; width:100%;}
    #top .logo a, #top .logo img{display: inline; float:none;}
    #top .main_menu{width:100%;}

    }

    You can apply the css styling inside the media query. For reference visit this link http://css-tricks.com/snippets/css/media-queries-for-standard-devices/.

    Regards,

    Ismael

    #104783

    Hey, Thanks for the reply… So in your css you can target screen sizes and style accordingly? Awesome.. I think i get it.. pretty niffty….

    thanks!

    #104784

    Hey,

    Yep, you can target screen sizes. The styling will take effect accordingly. Try it on your custom.css. :)

    Regards,

    Ismael

    #104785

    Okay, So i have been trying out some of this media queries. When i put them in my custom.css my layout.css is still taking precedence.

    I get the concept just having trouble actually getting them to take effect..

    Any more help would be awesome…

    Thanks Ismael!

    #104786

    Hi makproductions06,

    You may need to target your css a bit better if it isn’t taking effect in the custom.css file. That css file is loaded last and so any in it should take priority.

    So if you for example did .logo {some css declaration} instead of #top .logo {some css declaration} the first one would do nothing because the layout.css already starts with the #top id selector giving it more importance.

    Regards,

    Devin

    #104787

    Devin! My Hero… Okay, yes that is what i have been doing.. just .logo{}.. I’ll try out.. thanks!

    #104788

    Okay, I must not be doing something right….Media Query Noob.. I can get some sizes to work but others dont… Aaaaa.. this is frustrating!!!

    I don’t know how much more help you guys can give but any suggestions would be great for what i am doing wrong….

    #104789

    Hi makproductions06,

    Can you post a link to your site? so we can check it further.

    Regards,

    Ismael

    #104790
    #104791

    That url is pulling up a “this domain is for sale page”.

    As an aside, I always start with this when making media queries:

    /* #Media Queries
    ================================================== */

    /* Smaller than standard 960 (devices and browsers) */
    @media only screen and (max-width: 959px) {}

    /* Tablet Portrait size to standard 960 (devices and browsers) */
    @media only screen and (min-width: 768px) and (max-width: 959px) {}

    /* All Mobile Sizes (devices and browser) */
    @media only screen and (max-width: 767px) {}

    /* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
    @media only screen and (min-width: 480px) and (max-width: 767px) {}

    /* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
    @media only screen and (max-width: 479px) {}

    Add it to your custom.css file and then you can just target the devices and sizes you need with the css. Just don’t use any !important stuff in there as it gets a bit hard to track.

    Regards,

    Devin

    #104792

    Hey devin.. sorry it is socialhouse.lebnanimg.com.. I’ll try this out later and then post my css to see where i’m making the mistake..

    thanks for your help..

    #104793

    So for some reason it is working now….

    This is what i did.

    /* #Media Queries
    ================================================== */

    /* Smaller than standard 960 (devices and browsers) */
    @media only screen and (max-width: 959px) {
    #top .logo a {
    left: 47px;
    }
    .logo {
    left: 47px;
    }

    #top .main_menu .menu li{
    margin-left: 0;
    }
    }

    /* Tablet Portrait size to standard 960 (devices and browsers) */
    @media only screen and (min-width: 768px) and (max-width: 959px) {

    }

    /* All Mobile Sizes (devices and browser) */
    @media only screen and (max-width: 794px) {
    #top .logo a {
    left: 0;
    }
    .logo {
    left: 0;
    }
    .mobileMenu {
    width:100%;
    }
    .main_menu {
    padding-bottom: 0;
    }
    }

    /* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
    @media only screen and (min-width: 480px) and (max-width: 767px) {}

    /* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
    @media only screen and (max-width: 479px) {}

    I thought i was targeting it correctly the first billion times but maybe not.. I used inspector to figure out what was over riding my custom.css

    It works on my desktop, iphone, and nexus 7…

    who knows what it was…

    thanks for working it out with me..

    #104794

    Hi makproductions06,

    Glad that its working now. :)

    Regards,

    Ismael

Viewing 14 posts - 1 through 14 (of 14 total)

The topic ‘Responsive Centered Logo’ is closed to new replies.