http://www.kriesi.at/support/topic/responsive-centered-logo Support Forum - Topic: Responsive Centered Logo en-US Sun, 26 May 2013 02:34:59 +0000 http://bbpress.org/?v=1.0.2 q http://www.kriesi.at/support/search.php http://www.kriesi.at/support/topic/responsive-centered-logo#post-95379 Wed, 06 Feb 2013 01:36:18 +0000 Ismael 95379@http://www.kriesi.at/support/ <p>Hi makproductions06,</p> <p>Glad that its working now. :)</p> <p>Regards,<br /> Ismael </p> http://www.kriesi.at/support/topic/responsive-centered-logo#post-95369 Wed, 06 Feb 2013 00:16:31 +0000 makproductions06 95369@http://www.kriesi.at/support/ <p>So for some reason it is working now.... </p> <p>This is what i did. </p> <pre><code>/* #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) {}</code></pre> <p>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</p> <p>It works on my desktop, iphone, and nexus 7... </p> <p>who knows what it was...</p> <p>thanks for working it out with me.. </p> http://www.kriesi.at/support/topic/responsive-centered-logo#post-95339 Tue, 05 Feb 2013 18:51:52 +0000 makproductions06 95339@http://www.kriesi.at/support/ <p>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.. </p> <p>thanks for your help.. </p> http://www.kriesi.at/support/topic/responsive-centered-logo#post-95159 Tue, 05 Feb 2013 02:01:09 +0000 Devin 95159@http://www.kriesi.at/support/ <p>That url is pulling up a "this domain is for sale page". </p> <p>As an aside, I always start with this when making media queries:<br /> <pre><code>/* #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) {}</code></pre> <p>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.</p> <p>Regards,</p> <p>Devin </p> http://www.kriesi.at/support/topic/responsive-centered-logo#post-95156 Tue, 05 Feb 2013 01:38:07 +0000 makproductions06 95156@http://www.kriesi.at/support/ <p>HTTP://socialhouse.lebnani.com </p> http://www.kriesi.at/support/topic/responsive-centered-logo#post-93870 Tue, 29 Jan 2013 05:23:50 +0000 Ismael 93870@http://www.kriesi.at/support/ <p>Hi makproductions06,</p> <p>Can you post a link to your site? so we can check it further.</p> <p>Regards,<br /> Ismael </p> http://www.kriesi.at/support/topic/responsive-centered-logo#post-93794 Mon, 28 Jan 2013 19:26:50 +0000 makproductions06 93794@http://www.kriesi.at/support/ <p>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!!!<br /> I don't know how much more help you guys can give but any suggestions would be great for what i am doing wrong.... </p> http://www.kriesi.at/support/topic/responsive-centered-logo#post-93785 Mon, 28 Jan 2013 18:47:19 +0000 makproductions06 93785@http://www.kriesi.at/support/ <p>Devin! My Hero... Okay, yes that is what i have been doing.. just .logo{}.. I'll try out.. thanks! </p> http://www.kriesi.at/support/topic/responsive-centered-logo#post-93784 Mon, 28 Jan 2013 18:43:07 +0000 Devin 93784@http://www.kriesi.at/support/ <p>Hi makproductions06,</p> <p>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.</p> <p>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.</p> <p>Regards,</p> <p>Devin </p> http://www.kriesi.at/support/topic/responsive-centered-logo#post-93686 Mon, 28 Jan 2013 06:33:25 +0000 makproductions06 93686@http://www.kriesi.at/support/ <p>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. </p> <p>I get the concept just having trouble actually getting them to take effect..</p> <p>Any more help would be awesome... </p> <p>Thanks Ismael! </p> http://www.kriesi.at/support/topic/responsive-centered-logo#post-93575 Sun, 27 Jan 2013 02:54:04 +0000 Ismael 93575@http://www.kriesi.at/support/ <p>Hey,</p> <p>Yep, you can target screen sizes. The styling will take effect accordingly. Try it on your custom.css. :)</p> <p>Regards,<br /> Ismael </p> http://www.kriesi.at/support/topic/responsive-centered-logo#post-93572 Sun, 27 Jan 2013 02:40:31 +0000 makproductions06 93572@http://www.kriesi.at/support/ <p>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....</p> <p>thanks! </p> http://www.kriesi.at/support/topic/responsive-centered-logo#post-93558 Sun, 27 Jan 2013 00:01:31 +0000 Ismael 93558@http://www.kriesi.at/support/ <p>Hi,</p> <p>You can refer to css &gt; layout.css for responsive css, example is this</p> <pre><code>@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%;} }</code></pre> <p>You can apply the css styling inside the media query. For reference visit this link <a href="http://css-tricks.com/snippets/css/media-queries-for-standard-devices/" rel="nofollow">http://css-tricks.com/snippets/css/media-queries-for-standard-devices/</a>.</p> <p>Regards,<br /> Ismael </p> http://www.kriesi.at/support/topic/responsive-centered-logo#post-93453 Fri, 25 Jan 2013 17:39:05 +0000 makproductions06 93453@http://www.kriesi.at/support/ <p>Socialhouse.lebnani.com</p> <p>two things i'm trying to accomplish... </p> <p> 1. I need the logo to be horizontally centered in the header.</p> <p> 2. The logo needs to be responsive. </p> <p>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.. </p> <p>How do i make the logo act like the rest of the page. Responsively. </p> <p>Thanks a lot! </p>