Responsive Centered Logo « Support Forum | Kriesi.at - Wordpress Themes and HTML Templates

Support Forum » Propulsion

Responsive Centered Logo

14 posts from 3 voices

Started 4 months ago by makproductions06
Latest reply from Ismael
This topic is not a support question

Tags:

makproductions06
Member

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!

Posted 4 months ago #
Ismael
Moderator
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
Posted 4 months ago #
makproductions06
Member

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!

Posted 4 months ago #
Ismael
Moderator

Hey,

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

Regards,
Ismael

Posted 4 months ago #
makproductions06
Member

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!

Posted 4 months ago #
Devin
Moderator

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

Posted 4 months ago #
makproductions06
Member

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

Posted 4 months ago #
makproductions06
Member

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....

Posted 4 months ago #
Ismael
Moderator

Hi makproductions06,

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

Regards,
Ismael

Posted 4 months ago #
makproductions06
Member

HTTP://socialhouse.lebnani.com

Posted 4 months ago #

Devin
Moderator

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

Posted 4 months ago #

makproductions06
Member

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..

Posted 4 months ago #

makproductions06
Member

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..

Posted 4 months ago #