http://www.kriesi.at/support/tags/height Support Forum - Tag: height - Recent Posts en-US Thu, 20 Jun 2013 09:52:08 +0000 http://bbpress.org/?v=1.0.2 q http://www.kriesi.at/support/search.php http://www.kriesi.at/support/topic/slideshow-height-auto-resize-on-load#post-118192 Thu, 13 Jun 2013 20:58:37 +0000 Devin 118192@http://www.kriesi.at/support/ <p>Glad you were able to find a solution that worked for you :)</p> <p>Let us know if you have any other questions or issues.</p> <p>Regards,</p> <p>Devin </p> http://www.kriesi.at/support/topic/fixed-height-portfolio-slideshow#post-117908 Wed, 12 Jun 2013 19:19:31 +0000 Nick 117908@http://www.kriesi.at/support/ <p>The best way to go about it, is to first install the Simple Image Sizes plugin ( <a href="http://wordpress.org/extend/plugins/simple-image-sizes/" rel="nofollow">http://wordpress.org/extend/plugins/simple-image-sizes/</a> ). The plugin will give you complete control over images: setting constraints for specific locations like blog, thumbnails, portfolio, gallery, shop, etc. along with the ability to set whether to crop an image or not in Settings &gt; Media.</p> <p>Changing the dimensions of images does NOT automatically change all the images already uploaded but only affects new uploads. To change the sizes of images already uploaded, you will need to use the Regenerator - also a part of the Simple Image Sizes and found on the bottom of Settings &gt; Media. Don't forget that images scale down, so always upload images bigger (or the same) as the constraints you set in Settings &gt; Media (with the plugin) or you will get blurry (stretched) or incomplete images.</p> <p>============</p> <p>You need to create some rules for your images. That you will only have 3 types of images. A square, a landscape with a height of 650px , and a portrait with a width of 650. Then you can use css .. something like this<br /> <pre><code>#top.single-portfolio .slideshow li img{ min-height: 650px; max-width: 100%; min-width: 650px; max-height: 100%; }</code></pre> <p>or</p> <pre><code>#top.single-portfolio .slideshow li img{ min-height: 650px; height: 100%; min-width: 630px; width: 100%; }</code></pre> <p>However, since the available area is a square 630x630 , you will wind up with cut off images. There is simply no room . So you need to pick a smaller number, 315px to be the max height of landscape and 315px to be max width of portrait. So that way your portraits can be 315 (min) x 630 (max) and your landscapes 630 (max) x 315 (min).</p> <p>Try it with your current images</p> <pre><code>#top.single-portfolio .slideshow li img { min-height: 315px; max-height: 630px; min-width: 315px; max-width: 630px; }</code></pre> <p>Thanks,</p> <p>Nick </p> http://www.kriesi.at/support/topic/slideshow-height-auto-resize-on-load#post-117859 Wed, 12 Jun 2013 14:48:05 +0000 Blackthorns 117859@http://www.kriesi.at/support/ <p>Hi,<br /> I add this code to my CSS file :</p> <p>#top .slideshow {<br /> height: 227px !important;<br /> }</p> <p>and it seems to work now. </p> http://www.kriesi.at/support/topic/slideshow-height-auto-resize-on-load#post-117840 Wed, 12 Jun 2013 13:28:44 +0000 Blackthorns 117840@http://www.kriesi.at/support/ <p>Hi, thanks.<br /> I added your code but now, the slider is resizing everytime with each picture...<br /> It's like 227px &gt; 230px &gt;227px..<br /> Can you help me please ? </p> http://www.kriesi.at/support/topic/fixed-height-portfolio-slideshow#post-117442 Mon, 10 Jun 2013 20:08:26 +0000 aldermancompany 117442@http://www.kriesi.at/support/ <p>I've searched through several of the other threads, but have yet to find an answer for what I'm after.</p> <p>I'm creating a site using Angular that within the Portfolio section, uses both vertical and horizontal images throughout. Since there is content below the images in the slideshow on each portfolio-single page, I would like to limit the height of the image in each slideshow, without cropping the image. Currently, the theme is setup (or so it appears to me) to have a max width of 630px by whatever height the image happens to be at that width. I'm wanting to accomplish the inverse of this: max height of 650px by whatever width the image happens to be (up to 630px).</p> <p>I've changed the functions.php to create a specific size called 'portfolio-fixed', which uses the following code:<br /> <code>$avia_config['imgSize']['portfolio-fixed'] = array('width'=&gt;9999, 'height'=&gt;650, 'crop'=&gt;false);</code></p> <p>And changed the 'loop-portfolio-single.php' to reflect this change:<br /> <code>$slider-&gt;setImageSize('portfolio-fixed');</code></p> <p>I'm also using the Regenerate Thumbnails plugin to recreate the images at the new size. Yet, no dice. So I'm looking for answers hoping someone will be able to see what I'm perhaps missing. And if visuals help, here are a few:</p> <p>Current shot of vertical images within a portfolio page:<br /> <a href="http://bit.ly/11v5xwQ" rel="nofollow">http://bit.ly/11v5xwQ</a></p> <p>Shot of what I'm wanting to accomplish with resized Vertical images:<br /> <a href="http://bit.ly/16XIouX" rel="nofollow">http://bit.ly/16XIouX</a></p> <p>Horizontal image treatment (no change from current state):<br /> <a href="http://bit.ly/11v5GQJ" rel="nofollow">http://bit.ly/11v5GQJ</a></p> <p>Link to portfolio page on development website:<br /> <a href="http://bit.ly/13uU6a4" rel="nofollow">http://bit.ly/13uU6a4</a></p> <p>Thanks,<br /> Aaron </p> http://www.kriesi.at/support/topic/header-height-control-fixed-header-social-icons-additional-navigation#post-117235 Sun, 09 Jun 2013 07:52:16 +0000 Nick 117235@http://www.kriesi.at/support/ <p>Hi,</p> <p>Since I can't see your code to give you the correct css for your situation, I will guess. Please add this to your /css/custom.css or to Quick CSS located in Enfold &gt; Theme Options - Layout (textarea at the bottom) . If it doesn't fit change 247px to a lower or higher number.</p> <pre><code>.fixed_header.social_header #main { padding-top:197px !important; }</code></pre> <p>Switching to mobile navigation at larger screen size will annoy tablet owners. I think a better solution would be to lower the menu , however to change the screen size that triggers the mobile menu please open up /js/avia.js and find line 1099 which looks like<br /> <pre><code>switchWidth: 768,</code></pre> <p>Change that number above (768) to 790<br /> and also please add this css but change 767 to whatever number you put above minus one. so if instead of 768 you put 777 then put 776 below.<br /> <pre><code>@media only screen and (max-width: 767px){ .responsive .main_menu { position: static; }}</code></pre> <p>Thanks,</p> <p>Nick </p> http://www.kriesi.at/support/topic/header-height-control-fixed-header-social-icons-additional-navigation#post-117077 Fri, 07 Jun 2013 21:29:33 +0000 Togel1 117077@http://www.kriesi.at/support/ <p>Hey Nick,</p> <p>here are 2 screenshots because I´m on localhost - see the word "Home" below the Logo. If I resize browser window to a smaller size it´s ok...</p> <p>Screen 1 - large browser window - <a href="http://grab.by/nk52" rel="nofollow">http://grab.by/nk52</a><br /> Screen 2 - small browser window - <a href="http://grab.by/nk5a" rel="nofollow">http://grab.by/nk5a</a></p> <p>In screen 2 you see another problem. The navigation overlaps the logo. As in your current online demo I would like to switch to mobile view at a larger browser size. Where must I modify the code - in CSS (media queries) or in JS-file. What are your settings in online demo?</p> <p>Thanks and greetings, Tom </p> http://www.kriesi.at/support/topic/header-height-control-fixed-header-social-icons-additional-navigation#post-116952 Fri, 07 Jun 2013 13:25:35 +0000 Nick 116952@http://www.kriesi.at/support/ <p>Hi,</p> <p>Do you have a url where this is taking place because I am not seeing this on my local. You can mask the url with <a href="http://www.goo.gl" rel="nofollow">http://www.goo.gl</a></p> <p>Thanks,</p> <p>Nick </p> http://www.kriesi.at/support/topic/header-height-control-fixed-header-social-icons-additional-navigation#post-116941 Fri, 07 Jun 2013 13:00:25 +0000 Togel1 116941@http://www.kriesi.at/support/ <p>Thanks, Nick,</p> <p>fine, that works - but when I set it to 150 then HEADER unfortunately overlaps the following CONTENT.</p> <p>Regards, Tom </p> http://www.kriesi.at/support/topic/header-height-control-fixed-header-social-icons-additional-navigation#post-116918 Fri, 07 Jun 2013 11:16:56 +0000 Nick 116918@http://www.kriesi.at/support/ <p>Hi,</p> <p>You can assign the initial height, The smaller height is based on a percent of the initial height.</p> <p>Please open up /js/avia.js and find line 776 that looks like<br /> <pre><code>el_height = $(elements).filter(&#39;:first&#39;).height(),</code></pre> <p>and change it to something like this, but using the height of the header you want (big). Don't forget the comma at the end,<br /> <pre><code>el_height = 120,</code></pre> <p>Thanks,</p> <p>Nick </p> http://www.kriesi.at/support/topic/header-height-control-fixed-header-social-icons-additional-navigation#post-116688 Thu, 06 Jun 2013 13:12:54 +0000 Togel1 116688@http://www.kriesi.at/support/ <p>Hey, I would like to change the hight of the HEADER</p> <p>- the INITIAL HEIGHT (when the page loads) and<br /> - the SMALLER HEIGHT after scrolling down.</p> <p>Can I assign any fixed values e.g. in pixels or percent?<br /> If this also will effect the size of the logo, it would be perfect.</p> <p>Thanks, Tom </p> http://www.kriesi.at/support/topic/slideshow-height-auto-resize-on-load#post-116608 Thu, 06 Jun 2013 09:11:43 +0000 Ismael 116608@http://www.kriesi.at/support/ <p>Hi,</p> <p>Add this on your custom.css</p> <pre><code>#top .slideshow li { width: 100%; height: 227px; } #top .slideshow li img { width: 100%; height: 227px; }</code></pre> <p>Regards,<br /> Ismael </p> http://www.kriesi.at/support/topic/slideshow-height-auto-resize-on-load#post-116572 Thu, 06 Jun 2013 07:55:15 +0000 Blackthorns 116572@http://www.kriesi.at/support/ <p>Hi,<br /> Here's my website : <a href="http://allandickens.com/billets-reservations-spectacle-paris-2013-magnifica/" rel="nofollow">http://allandickens.com/billets-reservations-spectacle-paris-2013-magnifica/</a><br /> I've got pages on my website with big slideshows at the top of them.<br /> The problem is I don't understand why the height of the slideshow is auto-resizing on load...<br /> There's a little transition on the ul.slideshow class.<br /> Any suggestion ?</p> <p>Cheers </p> http://www.kriesi.at/support/topic/logo-height-adjust-breaks-theme-in-ios-responsive-sizes#post-115867 Mon, 03 Jun 2013 12:16:51 +0000 Devin 115867@http://www.kriesi.at/support/ <p>Hi Andrew,</p> <p>I'm not getting any negative effect at all when looking at the site now. It looks like you may changed the layout/header set up however so I'm not sure if this is still valid.</p> <p>Regards,</p> <p>Devin </p> http://www.kriesi.at/support/topic/logo-height-adjust-breaks-theme-in-ios-responsive-sizes#post-115643 Sat, 01 Jun 2013 22:48:57 +0000 andypeck 115643@http://www.kriesi.at/support/ <p>A few weeks back I was given some code to lock the logo and menu into a fixed position. Therefore it would stay on screen all the time (even when im scrolling). Its been working fine but since upgrade to 1.5 when I shrink the screen to IOS sizes or try it on an iPhone the main screen is literally cut in half (one side is blank)</p> <p>You can see the effect if you try out my website.... andypeck.co.uk</p> <p>See below the lines of offending code where the main issue seems to be the lines related to the logo position . However, if I remove it then the logo is positioned too high. The only other way is tweaking the 'locking' part of the CSS which relates to scale but when I do this the logo resizes too small.</p> <p>Here's the code:</p> <p>/* LOCKS MENU INTO FIXED MODE - SCALES LOGO */<br /> strong.logo img, #header_main .container, .main_menu ul:first-child &gt; li &gt; a {<br /> height: 50px !important;<br /> line-height: 50px !important;<br /> padding-top:0px !important;<br /> }</p> <p>/* ADJUSTS LOGO WITHIN HEADER */<br /> .logo {<br /> margin-top: 20px !important;<br /> margin-bottom: 30px !important;<br /> }</p> <p>/* ADJUSTS HEADER HEIGHT */<br /> #header_main {<br /> height: 90px;<br /> }</p> <p>cheers<br /> Andrew </p> http://www.kriesi.at/support/topic/enfold-menu-drop-down-height-fix#post-114670 Wed, 29 May 2013 08:37:48 +0000 andypeck 114670@http://www.kriesi.at/support/ <p>All sorted thx - consider this resolved!</p> <p>Big thanks </p> http://www.kriesi.at/support/topic/enfold-menu-drop-down-height-fix#post-114576 Tue, 28 May 2013 21:53:42 +0000 andypeck 114576@http://www.kriesi.at/support/ <p>Big Thanks - Very useful to know. That explains allot. Im on a massive learning curve but im getting there slowly</p> <p>Cheers Devin </p> http://www.kriesi.at/support/topic/enfold-menu-drop-down-height-fix#post-114543 Tue, 28 May 2013 19:03:23 +0000 Devin 114543@http://www.kriesi.at/support/ <p>The border on the menu is from this css:<br /> <pre><code>/* CREATES TOP MENU FEINT LINE */ #top .main_menu { height: 27px; border-bottom-color: #5e5957 !important; border-bottom-width: 1px; border-bottom-style: solid !important; }</code></pre> <p>Just remember when you add new css for the desktop, you need to remove that styling if you dont' want it on the content below.</p> <p>Or, add your desktop only styles to a media query that will make them only show on a desktop. Something like:<br /> <pre><code>/* DESKTOP STYLES ----------------- Add styles inside the media query below that you only want to be applied to the desktop layout of your site */ @media only screen and (min-width: 768px) { /* Desktop styles go here */ }</code></pre> <p>Regards,</p> <p>Devin </p> http://www.kriesi.at/support/topic/enfold-menu-drop-down-height-fix#post-114436 Tue, 28 May 2013 13:27:13 +0000 andypeck 114436@http://www.kriesi.at/support/ <p>Hi There,</p> <p>Phew! Thought I was going mad! </p> <p>Menu looks great in full screen mode on my mac but looks terrible on IOS devices.</p> <p>*** Here's whats happening when responsive mode kicks in***<br /> a) Logo doesn't scale<br /> b) Lines above the menu (on right) don't turn of when the responsive menu appears - overlaps right across top<br /> c) In some instances (namely portrait mode on ipad) I end up with both menu's appearing at same time<br /> d) The slide out menu now has a nasty 'thick' line across it (need to lose that)</p> <p>Darn it.... Have I really gone and broke it dis time?!!<br /> Cheers<br /> Andy </p> http://www.kriesi.at/support/topic/enfold-menu-drop-down-height-fix#post-114423 Tue, 28 May 2013 11:36:55 +0000 Devin 114423@http://www.kriesi.at/support/ <p>Hey Andy,</p> <p>You just need to change that css to:<br /> <pre><code>strong.logo img, #header_main .container, .main_menu ul:first-child &gt; li &gt; a { height: 60px !important; line-height: 60px !important; padding-top:3px !important; }</code></pre> <p>which will prevent it from effecting the sub menus.</p> <p>Regards,</p> <p>Devin </p> http://www.kriesi.at/support/topic/enfold-menu-drop-down-height-fix#post-113972 Sun, 26 May 2013 12:27:28 +0000 andypeck 113972@http://www.kriesi.at/support/ <p>Hi there....</p> <p>I dont know how to give you access with it on so Ive just turned it off. Im not familiar with setting up maintenance which is why ive been working locally.</p> <p>Anyway, its off now.</p> <p>Can you help me?<br /> Cheers<br /> Andy </p> http://www.kriesi.at/support/topic/enfold-changed-header-menu-issues#post-113971 Sun, 26 May 2013 12:26:17 +0000 andypeck 113971@http://www.kriesi.at/support/ <p>Hi Ismael,</p> <p>Nick suggested I put it on maintenance mode but as I dont know how to give you access with it on Ive just turned it off. Im not familiar with setting up maintenance which is why ive been working locally.</p> <p>Anyway, its off now.</p> <p>Can you help?</p> <p>Big Thanks<br /> Andy </p> http://www.kriesi.at/support/topic/enfold-menu-drop-down-height-fix#post-113969 Sun, 26 May 2013 12:21:41 +0000 andypeck 113969@http://www.kriesi.at/support/ <p>Hiya Ismael,</p> <p>I was told too by Nick!!! should I take it off so you can look at it or can you tell me how I give you access?</p> <p>Cheers </p> http://www.kriesi.at/support/topic/enfold-menu-drop-down-height-fix#post-113895 Sun, 26 May 2013 04:29:22 +0000 Ismael 113895@http://www.kriesi.at/support/ <p>Hi,</p> <p>Your website is on maintenance mode.</p> <p>Regards,<br /> Ismael </p> http://www.kriesi.at/support/topic/enfold-changed-header-menu-issues#post-113894 Sun, 26 May 2013 04:29:17 +0000 Ismael 113894@http://www.kriesi.at/support/ <p>Hi,</p> <p>Your website is on maintenance mode.</p> <p>Regards,<br /> Ismael </p> http://www.kriesi.at/support/topic/enfold-menu-drop-down-height-fix#post-113764 Sat, 25 May 2013 09:58:54 +0000 andypeck 113764@http://www.kriesi.at/support/ <p>hi there,</p> <p>Ive managed to lock the 'fixed' menu and stop it from doing the shrink effect when you scroll the page. How do I now reset the drop down menu line spacing to the right line height as the following code fixes the 'shrink effect' but messes up the line depth on the rollover drop down (see 'ABOUT' on dummy menu)</p> <p><a href="http://www.andypeck.co.uk/" rel="nofollow">http://www.andypeck.co.uk/</a></p> <p>the code that locked the menu is....</p> <p>strong.logo img, #header_main .container, .main_menu ul:first-child &gt; li a {<br /> height: 60px !important;<br /> line-height: 60px !important;<br /> padding-top:3px !important;<br /> }</p> <p>Cheers<br /> Andy </p> http://www.kriesi.at/support/topic/enfold-changed-header-menu-issues#post-113763 Sat, 25 May 2013 09:37:12 +0000 andypeck 113763@http://www.kriesi.at/support/ <p>Hi there dsgnerfw,</p> <p>theres actually a tab in the main dashboard called 'portfolio'... go there, and make a new portfolio item but make sure you create a 'featured image' which is at the bottom right of a NEW page. The featured image is the bit that appears in your portfolio grid. then add sliders, copy and anything else on that page. If you want multiple categories like PHOTOGRAPHY or VIDEO then either create them in the categories bit (still under the portfolio tab) or from within the new portfolio item you are creating (down the right hand side of the interface) Once youve created a few cats then when youve added a few portfolios items you can just tick which cat you want to assign it too. Portfolios can be assigned to multiple cats too</p> <p>Hope that helps<br /> Andy </p> http://www.kriesi.at/support/topic/enfold-changed-header-menu-issues#post-113727 Sat, 25 May 2013 07:46:07 +0000 dsgnerfw 113727@http://www.kriesi.at/support/ <p>Nice one andy , hmmm might want to consider a fixed layout like yours hehe.</p> <p>In your portfolio there's ALL / Photography / Design</p> <p>I have a created a gallery using the advance layout editor but it focuses on my logo only. &lt;&lt; Made 1 portfolio item.</p> <p>So do I have to make 2 ? Then make a page and post it there ? </p> http://www.kriesi.at/support/topic/enfold-changed-header-menu-issues#post-113640 Fri, 24 May 2013 22:33:04 +0000 andypeck 113640@http://www.kriesi.at/support/ <p>sorry I meant <a href="http://www.andypeck.co.uk" rel="nofollow">http://www.andypeck.co.uk</a></p> <p>Cheers<br /> Andy </p> http://www.kriesi.at/support/topic/enfold-changed-header-menu-issues#post-113639 Fri, 24 May 2013 22:31:24 +0000 andypeck 113639@http://www.kriesi.at/support/ <p>Hi there,</p> <p>Following various posts ive managed to almost get the top nav/logo the way I want it. Basically, I like the 'fixed menu' layout but didnt want the shrink effect, The 'code used' locks the menu/logo depth correctly but it also messes up the dropdown nav. I need it to not be so 'DEEP" between sub sections (its depth has been spread downward by the use of... "line-height: 60px !important;". I want it reset to the default depth. I also want its position moved back down to start at the top of the line (as per demo)... colours and fonts are correct. </p> <p>Here's the code that almost gets me there....</p> <p>strong.logo img, #header_main .container, .main_menu ul:first-child &gt; li a {<br /> height: 60px !important;<br /> line-height: 60px !important;<br /> padding-top:3px !important;<br /> }</p> <p>My website is <a href="http://www.andpeck.co.uk" rel="nofollow">http://www.andpeck.co.uk</a></p> <p>Cheers for your great support as always<br /> Andy </p>