Support Forum - Tag: padding

Support Forum - Tag: padding - Recent Posts http://www.kriesi.at/support/tags/padding Support Forum - Tag: padding - Recent Posts en-US Wed, 22 May 2013 21:31:26 +0000 http://bbpress.org/?v=1.0.2 <![CDATA[Search]]> q http://www.kriesi.at/support/search.php andypeck on "Enfold - Responsive Slide Out Menu **ISSUE**" http://www.kriesi.at/support/topic/enfold-responsive-slide-out-menu-issue#post-112945 Wed, 22 May 2013 13:27:24 +0000 andypeck 112945@http://www.kriesi.at/support/ Cheers Nick, yes, I was pushing my luck wasn't I? Ill upload my site at the weekend and then go from there. Cheers Andy Devin on "1 pixel line on right side of slider wont go away" http://www.kriesi.at/support/topic/1-pixel-line-on-right-side-of-slider-wont-go-away#post-112944 Wed, 22 May 2013 13:25:59 +0000 Devin 112944@http://www.kriesi.at/support/ Hi thorsky, We'll need to see the site and page live to see whats going on. If you can provide the link, we'll take a look and see what we can do. Regards, Devin Nick on "Enfold - Responsive Slide Out Menu **ISSUE**" http://www.kriesi.at/support/topic/enfold-responsive-slide-out-menu-issue#post-112931 Wed, 22 May 2013 12:35:16 +0000 Nick 112931@http://www.kriesi.at/support/ Hi, My imagination only goes so far, can you gather all the css code to the point where you are so that I can add it to the demo to get the exact look you have , and tell me the url of the demo just to make sure. Because I had everything look fine, but it doesn't on your site, that means that there is css or some customization i am missing. So at this point either show me the site, or test yourself first on the demo by adding the css and then paste here. Thanks, Nick andypeck on "Enfold - Responsive Slide Out Menu **ISSUE**" http://www.kriesi.at/support/topic/enfold-responsive-slide-out-menu-issue#post-112918 Wed, 22 May 2013 11:35:27 +0000 andypeck 112918@http://www.kriesi.at/support/ Oh, and looking at a2) again. I guess all that needs to happen is this newly drawn grey line needs to just switch off whilst the responsive menu is operational. The line scales up until that point so I guess it just needs a switch. Would I be right? Cheers Andy andypeck on "Enfold - Responsive Slide Out Menu **ISSUE**" http://www.kriesi.at/support/topic/enfold-responsive-slide-out-menu-issue#post-112916 Wed, 22 May 2013 11:31:54 +0000 andypeck 112916@http://www.kriesi.at/support/ Hi again Nick, Just tried out both pieces of CSS and the line is now removed from the responsive slide out menu. Thats question 'b' sorted....great! As for question 'a', well, im glad you get what im trying to achieve and its almost there. The line goes across the menu perfectly and ive positioned it at the top. However, two things are happening. a1) I need the long 1px grey line to sit on a layer behind the 2px thick short line. currently, its on a layer above it. a2) as nice as this line is, its doesn't scale (or shorten) properly when the responsive menu appears. It just stays at the top and doesn't scale any further. --------------------------------------- Can I just say, to you and the others Nick... you are by far the most supportive post sales service ive ever had dealings with. You've actually made me excited to get this site looking exactly as I want it without expecting me to learn everything myself. Gradually, I've learnt more and more and its a great experience. Thank you andypeck on "Enfold - Responsive Slide Out Menu **ISSUE**" http://www.kriesi.at/support/topic/enfold-responsive-slide-out-menu-issue#post-112909 Wed, 22 May 2013 10:57:57 +0000 andypeck 112909@http://www.kriesi.at/support/ Hi Nick, Ill give this a go. Im pretty well set on my structure but there are a few teething issues (the line above menu) which you will need to see before I can expect you to help much more. I'm moving it all online this weekend and then we can review. Ill keep tweaking and asking questions on here till the weekend and then we shall see how it looks live Cheers Andy Nick on "Enfold - Responsive Slide Out Menu **ISSUE**" http://www.kriesi.at/support/topic/enfold-responsive-slide-out-menu-issue#post-112903 Wed, 22 May 2013 10:14:55 +0000 Nick 112903@http://www.kriesi.at/support/ Hi, a) That line is the top border of the main content block and it cant be moved without moving the entire content area. You can see what I mean here, <a href="http://goo.gl/BCmSy" rel="nofollow">http://goo.gl/BCmSy</a>. I am not sure if this can be easily done where you want it. You can try something like this. Play with the 40px, and try it as 40% (well some percent).. <pre><code>#top .main_menu { height: 40px; border-bottom-color: rgb(0, 0, 0) !important; border-bottom-width: 1px; border-bottom-style: solid !important; }</code></pre> b) add this css to get rid of the line in mobile menu <pre><code>@media only screen and (max-width: 767px) { #top .avia-menu-fx { border-width: 0px !important; }}</code></pre> bb) need to see the code. Thanks, Nick andypeck on "Enfold - Responsive Slide Out Menu **ISSUE**" http://www.kriesi.at/support/topic/enfold-responsive-slide-out-menu-issue#post-112832 Wed, 22 May 2013 05:45:27 +0000 andypeck 112832@http://www.kriesi.at/support/ Hi there, Talking of menu customization. in the image I supplied: <a href="http://www.clipular.com/c?6044013=M66Ac_fn-H0sYdLewieu-vVGIMA&f=eb6d72c77f6f72f1ab09eaf9b55d3d7c" rel="nofollow">http://www.clipular.com/c?6044013=M66Ac_fn-H0sYdLewieu-vVGIMA&f=eb6d72c77f6f72f1ab09eaf9b55d3d7c</a> Menu questions: a) Can I put the social media icons over to the right above the menu. Possible? b) Can I control the colours of the social media icons, if I have to have the very top bar (after ive moved icons to the right), can I make it same color as my main menu thus making it appear as part of that menu? b) I would like to allow it to be a fixed menu (and remain always at the top) but the 'line' over the menu doesnt move with the menu when stretching and the padding beneath the menu and logo is reduced too far so the slider overlaps the menu. How can I fix/increase the padding/bottom margin? Nick on "Enfold - Responsive Slide Out Menu **ISSUE**" http://www.kriesi.at/support/topic/enfold-responsive-slide-out-menu-issue#post-112826 Wed, 22 May 2013 04:06:43 +0000 Nick 112826@http://www.kriesi.at/support/ Hi, Ahh just css to add to custom.css , before i thought you posted a chunk of css from one of the template files. Nice customization to menu , looks good. Try this please <pre><code>#top .avia-menu-fx { top: 40% !important; }</code></pre> 'The small size menu no longer has that line strike through each menu word. Thanks, Nick thorsky on "1 pixel line on right side of slider wont go away" http://www.kriesi.at/support/topic/1-pixel-line-on-right-side-of-slider-wont-go-away#post-112669 Tue, 21 May 2013 13:25:35 +0000 thorsky 112669@http://www.kriesi.at/support/ I am having the problem of a 1 pixel line showing up to the right of my home page slider.. I have changed background color to black and it is still there.. a 1 pixel white line…???? How can I remove…. My images are the exact size of the slider.. and i have also tried using larger images..but still have a 1 pixel white line on the right side of the home page slider.. Please help.. Devin on "Enfold - Responsive Slide Out Menu **ISSUE**" http://www.kriesi.at/support/topic/enfold-responsive-slide-out-menu-issue#post-112659 Tue, 21 May 2013 12:58:02 +0000 Devin 112659@http://www.kriesi.at/support/ Hi Andy, You could try something like this in a media query for mobile and below: <pre><code>#menu_section .opened_menu { border-top: 1px solid white !important; }</code></pre> Regards, Devin andypeck on "Enfold - Responsive Slide Out Menu **ISSUE**" http://www.kriesi.at/support/topic/enfold-responsive-slide-out-menu-issue#post-112413 Mon, 20 May 2013 12:05:12 +0000 andypeck 112413@http://www.kriesi.at/support/ Hi Nick, Im not working online hence me sending the clipular link: <a href="http://www.clipular.com/c?6044013=M66Ac_fn-H0sYdLewieu-vVGIMA&f=eb6d72c77f6f72f1ab09eaf9b55d3d7c" rel="nofollow">http://www.clipular.com/c?6044013=M66Ac_fn-H0sYdLewieu-vVGIMA&f=eb6d72c77f6f72f1ab09eaf9b55d3d7c</a> If you dont think its the CSS code then ill have to wait till its all online and then if its still playing up ill come back to you. Although im pretty sure its due to me moving the line above the main menu so the error will still be there when its online. Before I do that, did you have any thoughts on the first question ---- creating the feint line across the menu. The link to my concept designs should show what im after Cheers as always Nick Andy Nick on "Enfold - Responsive Slide Out Menu **ISSUE**" http://www.kriesi.at/support/topic/enfold-responsive-slide-out-menu-issue#post-112235 Sun, 19 May 2013 18:06:51 +0000 Nick 112235@http://www.kriesi.at/support/ Hi, I don't see any error in responsive mode here andypeck.co.uk -- <a href="http://i.imgur.com/EJjOsdG.png" rel="nofollow">http://i.imgur.com/EJjOsdG.png</a> Please show which page on your site is experiencing this issue. Thanks, Nick andypeck on "Enfold - Responsive Slide Out Menu **ISSUE**" http://www.kriesi.at/support/topic/enfold-responsive-slide-out-menu-issue#post-112059 Fri, 17 May 2013 20:48:14 +0000 andypeck 112059@http://www.kriesi.at/support/ Nick - Just had a thought and wondered if I could kill two birds with one stone without having to go live... If this doesnt help you then let me know and ill get the first few pages uploaded Here's my thoughts I've attached a link to a set of images that outline three things a) what I want to achieve overall with the nav (look n' feel) as created in Photoshop b) what I've achieved thus far (still missing the feint grey line we've discussed before) c) whats going wrong in responsive mode Here's the link to the images I've grabbed: <a href="http://www.clipular.com/c?6044013=M66Ac_fn-H0sYdLewieu-vVGIMA&f=eb6d72c77f6f72f1ab09eaf9b55d3d7c" rel="nofollow">http://www.clipular.com/c?6044013=M66Ac_fn-H0sYdLewieu-vVGIMA&f=eb6d72c77f6f72f1ab09eaf9b55d3d7c</a> so……. two things: 1) Can you help me create the feint line still missing from the top of the nav (see image). Its 1 px deep and spans the width of my menu, its grey, should be responsive and allow the HIGHLIGHT BLOCK to travel along it. Obviously, I may add sections so it needs to adapt when I add or take away pages 2) Can you help me remove the superfluous thick line that appears in the slide out responsive menu. I don't want it at all in this mode. I just want the menu to behave/look like yours in the demo. Here's the code I'm using to adapt the nag (as requested) --------------------------------------------------------------------- --------------------------------------------------------------------- <pre><code>/* MENU BORDERS */ #top .main_menu .menu ul li:last-child>a { border-bottom-style: solid; border-bottom-color: #33302b; border-bottom-width: 1px; border-top-style: solid !important; border-top-color: #33302b !important; border-top-width: 1px !important; } #top .main_menu .menu ul li a { border-right-style: solid; border-right-color: #33302b; border-right-width: 1px; border-left-style: solid; border-left-color: #33302b; border-left-width: 1px; } #top .header_color .main_menu ul:first-child >li > ul, #top .header_color .avia_mega_div > .sub-menu { border-top-color: #423e38; !important; border-top-style: solid; border-top-width: 1px; } /* Top Menu width spacing */ #top .main_menu ul:first-child > li > a { margin-top: 1px; padding: 0 10px; } #top .container_wrap { border-top-width: 2px; } /* Main Menu - ROLLOFF TEXT */ #top .header_color .main_menu ul:first-child>li>a { padding-top: 7px !important; color: #eee6de ; font-size: 1.4em; letter-spacing: 0.0em; font-weight:400; } /* Main Menu - ROLLOVER TEXT */ #top .header_color .main_menu ul:first-child>li>a:hover { color: #d83300; font-size: 1.4em; letter-spacing: 0.0em; font-weight:400; } /* Main Menu - SUB MENU OFF */ #top .main_menu .menu ul li>a { color: #e2e2e2; font-size: 1.2em; letter-spacing: 0.0em; font-weight:400; } /* Main Menu - SUB MENU HOVER */ #top .main_menu .menu ul li>a:hover { color: #e2e2e2 !important; background-color: #d83300; } /* Main Menu - HIGHLIGHT BLOCK */ #top .avia-menu-fx { display:block; position:absolute; top: 28px; border-style:solid; border-width:2px; } /* HEADER - BOTTOM LINE (attached to slider) */ #header_main { border-bottom-style: solid; border-bottom-color: #3b3330; }</code></pre> andypeck on "Enfold - Responsive Slide Out Menu **ISSUE**" http://www.kriesi.at/support/topic/enfold-responsive-slide-out-menu-issue#post-112053 Fri, 17 May 2013 20:26:31 +0000 andypeck 112053@http://www.kriesi.at/support/ Hi Nick, Im working on a local server at the moment otherwise I would be more than happy to share my findings. Not sure about the bit about masking URLs unless theres another way of me showing you my site. What I think ill do is transport what Ive achieved to-date onto my live hosting account and then let you know. I'd prefer not to have to do it but it seems you cant easily help otherwise Ill try and do it this weekend Andy Nick on "Enfold - Responsive Slide Out Menu **ISSUE**" http://www.kriesi.at/support/topic/enfold-responsive-slide-out-menu-issue#post-111956 Fri, 17 May 2013 15:41:28 +0000 Nick 111956@http://www.kriesi.at/support/ Hi, I will need to see the page where this is taking place, you can use goo.gl to mask the url. Thanks, Nick Ismael on "Enfold - Responsive Slide Out Menu **ISSUE**" http://www.kriesi.at/support/topic/enfold-responsive-slide-out-menu-issue#post-111801 Fri, 17 May 2013 01:51:35 +0000 Ismael 111801@http://www.kriesi.at/support/ Hi, What is the code that you have right now, the code that Nick gave you? What header style do you have? Let me tag Nick. Regards, Ismael andypeck on "Enfold - Responsive Slide Out Menu **ISSUE**" http://www.kriesi.at/support/topic/enfold-responsive-slide-out-menu-issue#post-111679 Thu, 16 May 2013 15:31:26 +0000 andypeck 111679@http://www.kriesi.at/support/ Hi there, I had some help from Nick to move the 'underline effect' on the main menu so it sits above the menu text and moves with the rollover action. However, whilst this all works fine, I noticed that when I shrunk the page to when the responsive menu kicks in ----- whilst in the responsive slide out menu a thick line appears across the menu. Its clearly as a result of moving the line in the main menu. How do I get rid of this as I want it to look exactly the same as in the demo. Can it be hidden or reset whilst in this responsive mode. Cheers Andy mbesh on "Add telephone number above menu headings" http://www.kriesi.at/support/topic/add-telephone-number-above-menu-headings#post-109295 Mon, 06 May 2013 16:41:21 +0000 mbesh 109295@http://www.kriesi.at/support/ Devin, We even put a -40px value in there and the logo didn't move a bit. (so, we put "display: block !important;" back in there). I will start a new thread on this. This issue closed. Mark Devin on "Add telephone number above menu headings" http://www.kriesi.at/support/topic/add-telephone-number-above-menu-headings#post-108751 Fri, 03 May 2013 17:21:30 +0000 Devin 108751@http://www.kriesi.at/support/ Hi Mark, You can try something like this: <pre><code>@media only screen and (max-width: 767px){ #top .logo a, #top .logo img { margin-left: -10px; } }</code></pre> Please try and make new topic from now on for issues as I just noticed this one has been pretty heavily derailed from its original topic. It just makes it much better for others searching for things. Regards, Devin mbesh on "Add telephone number above menu headings" http://www.kriesi.at/support/topic/add-telephone-number-above-menu-headings#post-108670 Fri, 03 May 2013 12:13:18 +0000 mbesh 108670@http://www.kriesi.at/support/ Ismael, Sorry for this 'frustration', but it doesn't matter what we do (clear data/history; go to other sites first; etc.), just like before, it still 'centers' on the iPhone with Chrome and Safari, Android, and IE10 on the PC (though, with all other computer browsers, on both PC and Mac, when we reduce the width of the browser window, they all are left aligned!). Does this have something to do with how mobile browsers 'process'/render web sites? Would you looking at out custom.css help? (maybe the 'order' of what we have in there should be changed?) <a href="http://visualimpactsystems.com/wp-content/themes/angular/css/custom.css" rel="nofollow">http://visualimpactsystems.com/wp-content/themes/angular/css/custom.css</a> Sorry for being a bother, but we picked you guys/Angular primarily for its mobile responsive qualities. Mark Ismael on "Add telephone number above menu headings" http://www.kriesi.at/support/topic/add-telephone-number-above-menu-headings#post-108559 Thu, 02 May 2013 23:52:21 +0000 Ismael 108559@http://www.kriesi.at/support/ Hi, I'm sorry but I tried this code on your site and the logo is being left aligned automatically. Please try this one instead. Remove browser cache then reload the page. <pre><code>@media only screen and (max-width: 767px) #top .logo a, #top .logo img { display: block !important; }</code></pre> Thanks, Ismael mbesh on "Add telephone number above menu headings" http://www.kriesi.at/support/topic/add-telephone-number-above-menu-headings#post-108431 Thu, 02 May 2013 14:31:19 +0000 mbesh 108431@http://www.kriesi.at/support/ Devin, Here's what we are seeing: Android: <a href="http://www.4vis.com/Android.jpg" rel="nofollow">http://www.4vis.com/Android.jpg</a> iPhone-Chrome: <a href="http://www.4vis.com/iPhone-Chrome.jpg" rel="nofollow">http://www.4vis.com/iPhone-Chrome.jpg</a> iPhone-Safari: <a href="http://www.4vis.com/iPhone-Safari.jpg" rel="nofollow">http://www.4vis.com/iPhone-Safari.jpg</a> Now, we are focused on phones for this issue (since computers and tablets are wide enough not to have this issue), but I thought I would send you a pic of a PC with IE10 just to show you another way to see the issue easily: <a href="http://www.4vis.com/PC-IE10.jpg" rel="nofollow">http://www.4vis.com/PC-IE10.jpg</a> Thanks for your time on this. Mark Devin on "Add telephone number above menu headings" http://www.kriesi.at/support/topic/add-telephone-number-above-menu-headings#post-108403 Thu, 02 May 2013 13:30:02 +0000 Devin 108403@http://www.kriesi.at/support/ Hi Mark, I'm not getting the logo centered on anything I test at this point. Including browser widths, devices and multiple browsers. Also note we can see your custom.css file live so no need to post it here (<a href="http://visualimpactsystems.com/wp-content/themes/angular/css/custom.css)" rel="nofollow">http://visualimpactsystems.com/wp-content/themes/angular/css/custom.css)</a>. Regards, Devin mbesh on "Add telephone number above menu headings" http://www.kriesi.at/support/topic/add-telephone-number-above-menu-headings#post-108229 Wed, 01 May 2013 14:58:55 +0000 mbesh 108229@http://www.kriesi.at/support/ Ismael, Sorry to be a bother, but it is still 'centering' the logo with Chrome and Safari with iOS6 and with IE10 on the PC (all other browsers, both PC and Mac now render it properly to the left). [Cleared all data/histories many times]. I tried it two ways: Adding your new code to what I had... ======= @media only screen and (max-width: 767px) { .main_menu ul .sub-menu { visibility: none; opacity:0; display:block; } @media only screen and (max-width: 767px) { #top .logo{float: left; margin-left: 0; text-align: left;} } @media only screen and (max-width: 767px) #top .logo a, #top .logo img { display: block; } ======= and removing the previous suggestion, and just putting your new code in... ====== @media only screen and (max-width: 767px) { .main_menu ul .sub-menu { visibility: none; opacity:0; display:block; } @media only screen and (max-width: 767px) #top .logo a, #top .logo img { display: block; } ====== Neither worked. Any other suggestions? [Is there something I can put in the 'actual' template code for the logo (.php?) to 'force' it to the left all the time?]. Mark Ismael on "Add telephone number above menu headings" http://www.kriesi.at/support/topic/add-telephone-number-above-menu-headings#post-108131 Wed, 01 May 2013 06:38:09 +0000 Ismael 108131@http://www.kriesi.at/support/ Hi, I can see the problem. Use this then <pre><code>@media only screen and (max-width: 767px) #top .logo a, #top .logo img { display: block; }</code></pre> Regards, Ismael mbesh on "Add telephone number above menu headings" http://www.kriesi.at/support/topic/add-telephone-number-above-menu-headings#post-107995 Tue, 30 Apr 2013 11:46:44 +0000 mbesh 107995@http://www.kriesi.at/support/ Guys, The phone number is just fine, it's the logo that doesn't stay 'left justified' (it centers itself in 'landscape' view---only on the iPhone---tablets are fine, since they are 'wide' enough for this not to happen). [ Note: You can see the issue on a computer by just reducing the size of a browser window's width until the menu goes below the logo---that's when the logo centers itself). Mark Devin on "Add telephone number above menu headings" http://www.kriesi.at/support/topic/add-telephone-number-above-menu-headings#post-107968 Tue, 30 Apr 2013 09:52:01 +0000 Devin 107968@http://www.kriesi.at/support/ Hi Mark, Tested on iPad and the phone number stays floated to the right on all views that I can see. Regards, Devin Dude on "Add telephone number above menu headings" http://www.kriesi.at/support/topic/add-telephone-number-above-menu-headings#post-107916 Tue, 30 Apr 2013 05:08:53 +0000 Dude 107916@http://www.kriesi.at/support/ Hey! I'll mark this thread for Devin because he can test your website on an ipad. Regards, Peter mbesh on "Add telephone number above menu headings" http://www.kriesi.at/support/topic/add-telephone-number-above-menu-headings#post-107845 Mon, 29 Apr 2013 20:56:31 +0000 mbesh 107845@http://www.kriesi.at/support/ Dude, This is the custom.css file. I put your code just after the other "media only screen..." code: /* Have fun adding your style here :) - PS: At all times this file should contain a comment or a rule, otherwise opera might act buggy :( */ #js_sort_items { font-size: 14px; } #top .template-dynamic .callout { padding: 4px 0 0px; } #top .template-dynamic .callout p { padding-bottom: 0; } #top .mobileMenu { display: none !important; } #top h1.ajax-portfolio-title { font-size: 2.3em; } .ajax-portfolio-response { z-index: 2; } @media only screen and (max-width: 767px) { .main_menu ul .sub-menu { visibility: none; opacity:0; display:block; } @media only screen and (max-width: 767px) { #top .logo{float: left; margin-left: 0; text-align: left;} } .js_active .main_menu ul{display: block !important;} #top .primary-background, .info_text_header, #info_text_header .infotext { background-color: #c20024 !important; } .ajax-portfolio-response-wrapper { top: 40px; }} #top .portfolio-title { font-family: "Trebuchet MS", Helvetica, Arial, sans-serif; font-size: 14px; } .logo, .logo a { margin-top: -10px; float: left; } .phonenumber{ color: #c20024; font-size: 18px; text-align: right; } .phonenumber, .phonenumber a { margin-top: -10px; } Mark