http://www.kriesi.at/support/tags/responsive Support Forum - Tag: responsive - Recent Posts en-US Thu, 23 May 2013 10:11:53 +0000 http://bbpress.org/?v=1.0.2 q http://www.kriesi.at/support/search.php http://www.kriesi.at/support/topic/full-frame-image-background-issues#post-113224 Thu, 23 May 2013 09:03:46 +0000 hipisland 113224@http://www.kriesi.at/support/ <p>Hello,<br /> Did the theme update, tried without any plugin still the same, working perfect on computer and image is resized on Ipad, and phone! </p> http://www.kriesi.at/support/topic/is-the-display-theme-responsive#post-113221 Thu, 23 May 2013 08:57:47 +0000 majestic12 113221@http://www.kriesi.at/support/ <p>A while ago a purchased the "wordpress" display theme for my site, I checked the themeforest page for the theme and it does not say it is responsive. I would like to know though are there plans to make the theme responsive? It is a superb theme but I urgently need my site to work on iphones, ipads and mobile phones.</p> <p>If this is being worked on could you give us an idea as to when a responsive version is to be released?</p> <p>Many thanks</p> <p>Kind regards<br /> David </p> http://www.kriesi.at/support/topic/enfold-responsive-slide-out-menu-issue#post-113178 Thu, 23 May 2013 05:37:34 +0000 andypeck 113178@http://www.kriesi.at/support/ <p>Hi Nick,</p> <p>**** I UPLOADED IT AT LAST ****<br /> or at least a demo with dummy content with the home page.</p> <p>now.....</p> <p>a) The menu is fixed but I need to create more space at the top (above menu/logo) and below (menu/log) and ensure that when I scroll up and down the page that there is enough space so the 'moved thick &amp; feint line" dont overlap the menu. This is whats happening at the moment.<br /> b) The HUGE slab text under the slider works well but I somehow want the main heading 'CREATIVE&amp;DIVERSE' to wrap when the screen is shrunk to mobile phone dimensions. so it reads....</p> <p>CREATIVE<br /> &amp;<br /> DIVERSE</p> <p>-------- but only in smallest sizes as its ok to just shrink with everything else till that point</p> <p>Cheers<br /> Andy </p> http://www.kriesi.at/support/topic/turn-off-background-image-for-mobile-tablets#post-112964 Wed, 22 May 2013 14:23:41 +0000 Devin 112964@http://www.kriesi.at/support/ <p>Hi Bruce,</p> <p>It depends on what class selector the background image is being applied to, but the basics are pretty simple. Try adding the following CSS to your Quick CSS (located under the Styling Tab in the theme options) or the custom.css file in the css folder of your theme files:<br /> <pre><code>/* All Mobile Sizes (devices and browser) */ @media only screen and (max-width: 767px) { body#top {background: none;} }</code></pre> <p>Regards,</p> <p>Devin </p> 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/ <p>Cheers Nick,</p> <p>yes, I was pushing my luck wasn't I? Ill upload my site at the weekend and then go from there.</p> <p>Cheers<br /> Andy </p> 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/ <p>Hi,</p> <p>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.</p> <p>Thanks,</p> <p>Nick </p> 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/ <p>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?</p> <p>Cheers<br /> Andy </p> 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/ <p>Hi again Nick,</p> <p>Just tried out both pieces of CSS and the line is now removed from the responsive slide out menu. Thats question 'b' sorted....great!</p> <p>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.</p> <p>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.<br /> 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. </p> <p>---------------------------------------</p> <p>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 </p> 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/ <p>Hi Nick,</p> <p>Ill give this a go. </p> <p>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.</p> <p>Ill keep tweaking and asking questions on here till the weekend and then we shall see how it looks live</p> <p>Cheers<br /> Andy </p> 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/ <p>Hi,</p> <p>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>.</p> <p>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)..</p> <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> <p>b) add this css to get rid of the line in mobile menu<br /> <pre><code>@media only screen and (max-width: 767px) { #top .avia-menu-fx { border-width: 0px !important; }}</code></pre> <p>bb) need to see the code.</p> <p>Thanks,</p> <p>Nick </p> 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/ <p>Hi there, </p> <p>Talking of menu customization. in the image I supplied:<br /> <a href="http://www.clipular.com/c?6044013=M66Ac_fn-H0sYdLewieu-vVGIMA&amp;f=eb6d72c77f6f72f1ab09eaf9b55d3d7c" rel="nofollow">http://www.clipular.com/c?6044013=M66Ac_fn-H0sYdLewieu-vVGIMA&amp;f=eb6d72c77f6f72f1ab09eaf9b55d3d7c</a></p> <p>Menu questions:<br /> a) Can I put the social media icons over to the right above the menu. Possible?<br /> 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?<br /> 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? </p> 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/ <p>Hi,</p> <p>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</p> <pre><code>#top .avia-menu-fx { top: 40% !important; }</code></pre> <p>'The small size menu no longer has that line strike through each menu word. </p> <p>Thanks,</p> <p>Nick </p> http://www.kriesi.at/support/topic/turn-off-background-image-for-mobile-tablets#post-112676 Tue, 21 May 2013 13:48:06 +0000 brucegamble 112676@http://www.kriesi.at/support/ <p>Hi there, </p> <p>Is there a quick css way to switch off the background image (main one for the whole site) for mobiles and tablets?</p> <p>In my dev site, for the desktop version, the background image aligns with the content on the page, it loses the alignment when viewed on a tablet or phone so I would just like to switch the background image off for those devices. </p> <p>Thanks, </p> <p>Bruce. </p> 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/ <p>Hi Andy,</p> <p>You could try something like this in a media query for mobile and below:<br /> <pre><code>#menu_section .opened_menu { border-top: 1px solid white !important; }</code></pre> <p>Regards,</p> <p>Devin </p> http://www.kriesi.at/support/topic/full-frame-image-background-issues#post-112484 Mon, 20 May 2013 16:26:42 +0000 Devin 112484@http://www.kriesi.at/support/ <p>Hi hipisland,</p> <p>When you view the demo, are you getting the same issue? A couple things you can try: disable all active plugins besides WooCommerce, make sure you are using the most recent version of the theme available on Themeforest (I believe its 2.3 right now).</p> <p>Regards,</p> <p>Devin </p> 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/ <p>Hi Nick,</p> <p>Im not working online hence me sending the clipular link:<br /> <a href="http://www.clipular.com/c?6044013=M66Ac_fn-H0sYdLewieu-vVGIMA&amp;f=eb6d72c77f6f72f1ab09eaf9b55d3d7c" rel="nofollow">http://www.clipular.com/c?6044013=M66Ac_fn-H0sYdLewieu-vVGIMA&amp;f=eb6d72c77f6f72f1ab09eaf9b55d3d7c</a></p> <p>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</p> <p>Cheers as always Nick<br /> Andy </p> http://www.kriesi.at/support/topic/full-frame-image-background-issues#post-112394 Mon, 20 May 2013 11:22:15 +0000 hipisland 112394@http://www.kriesi.at/support/ <p>Hello, On flashlight I have problems with background image on my home page :</p> <p>on computer browser it works fine image is full as in this adress : <a href="http://www.hip-island.com" rel="nofollow">http://www.hip-island.com</a></p> <p>but on tablets or iphone the background is resized and smaller : this is only happening on the homepage (that happen to be the shop page from woocommerce)</p> <p>here is a page I have made on the site with screens : <a href="http://www.hip-island.com/screenshot-hip-island" rel="nofollow">http://www.hip-island.com/screenshot-hip-island</a> (the page is pass protected, password is : "open" )</p> <p>Any idea of what should be change to get same results on all the different devices? </p> 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/ <p>Hi,</p> <p>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></p> <p>Please show which page on your site is experiencing this issue.</p> <p>Thanks,</p> <p>Nick </p> http://www.kriesi.at/support/topic/enfold-making-slab-text-headings-responsive#post-112231 Sun, 19 May 2013 17:15:06 +0000 andypeck 112231@http://www.kriesi.at/support/ <p>Brilliant... as always Nick.</p> <p>Big thanks. Ill give it go </p> http://www.kriesi.at/support/topic/enfold-making-slab-text-headings-responsive#post-112221 Sun, 19 May 2013 14:24:33 +0000 Nick 112221@http://www.kriesi.at/support/ <p>Hi,</p> <p>put them in a div and give each a class leaving h6<br /> <pre><code>&lt;h6 class=&quot;slab-text&quot;&gt;Slab 1&lt;/h6&gt;</code></pre> <p>then use the last css I posted above, but change all...<br /> <pre><code>h6 {</code></pre> <p>...to<br /> <pre><code>h6.slab-text {</code></pre> <p>Thanks,</p> <p>Nick </p> http://www.kriesi.at/support/topic/subscription-field-cta-on-layerslider#post-112154 Sat, 18 May 2013 14:13:08 +0000 Devin 112154@http://www.kriesi.at/support/ <p>Will do and if you do find a solution that works for you, feel free to post it here :)</p> <p>Regards,</p> <p>Devin </p> 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/ <p>Nick - Just had a thought and wondered if I could kill two birds with one stone without having to go live...</p> <p>If this doesnt help you then let me know and ill get the first few pages uploaded</p> <p>Here's my thoughts</p> <p>I've attached a link to a set of images that outline three things<br /> a) what I want to achieve overall with the nav (look n' feel) as created in Photoshop<br /> b) what I've achieved thus far (still missing the feint grey line we've discussed before)<br /> c) whats going wrong in responsive mode</p> <p>Here's the link to the images I've grabbed:</p> <p><a href="http://www.clipular.com/c?6044013=M66Ac_fn-H0sYdLewieu-vVGIMA&amp;f=eb6d72c77f6f72f1ab09eaf9b55d3d7c" rel="nofollow">http://www.clipular.com/c?6044013=M66Ac_fn-H0sYdLewieu-vVGIMA&amp;f=eb6d72c77f6f72f1ab09eaf9b55d3d7c</a></p> <p>so…….</p> <p>two things:</p> <p>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</p> <p>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.<br /> Here's the code I'm using to adapt the nag (as requested)</p> <p>---------------------------------------------------------------------<br /> ---------------------------------------------------------------------<br /> <pre><code>/* MENU BORDERS */ #top .main_menu .menu ul li:last-child&gt;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 &gt;li &gt; ul, #top .header_color .avia_mega_div &gt; .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 &gt; li &gt; 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&gt;li&gt;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&gt;li&gt;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&gt;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&gt;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> 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/ <p>Hi Nick,</p> <p>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</p> <p>Ill try and do it this weekend<br /> Andy </p> http://www.kriesi.at/support/topic/enfold-making-slab-text-headings-responsive#post-112050 Fri, 17 May 2013 20:08:46 +0000 andypeck 112050@http://www.kriesi.at/support/ <p>hi there,</p> <p>thanks for all the suggestions and yes im aware that I might be messing up something else by using h6 for my slab text. Other than not using slab text can you suggest one of the h tags thats not really used or another, safer way to get large slab text into my design. I dont want to ruin the aesthetic of this lovely theme. Im sure theres a better way without me having to carve up such code for what is essentially half a dozen big slabs of text. I had wondered if I just use a graphic but it seems a bit of a cop out</p> <p>I welcome suggestions<br /> Andy </p> http://www.kriesi.at/support/topic/subscription-field-cta-on-layerslider#post-112040 Fri, 17 May 2013 19:42:18 +0000 relaxer88 112040@http://www.kriesi.at/support/ <p>Thanks for your quick reply Devin! At least you confirmed this is a tough one ;) Will try to experiment with the queries and use a button-only solution in the meantime...</p> <p>If you ever have any other idea, keep me posted! </p> http://www.kriesi.at/support/topic/subscription-field-cta-on-layerslider#post-112003 Fri, 17 May 2013 17:52:58 +0000 Devin 112003@http://www.kriesi.at/support/ <p>Hi r88,</p> <p>I'm not actually sure that is really possible at all without customizing the layerslider. You can experiment with its positioning and using media queries to target the class selector for that specific item but it would need to be very specific to that exact slide and content within it.</p> <p>Regards,</p> <p>Devin </p> http://www.kriesi.at/support/topic/client-logo-grid-with-rollover-links#post-111991 Fri, 17 May 2013 17:27:59 +0000 Devin 111991@http://www.kriesi.at/support/ <p>Hey Andy,</p> <p>I'm glad you were able to find a workaround that will do the trick :)</p> <p>Regards,</p> <p>Devin </p> http://www.kriesi.at/support/topic/enfold-making-slab-text-headings-responsive#post-111960 Fri, 17 May 2013 15:59:40 +0000 Nick 111960@http://www.kriesi.at/support/ <p>Hi,</p> <p>Since you are using the font in all screen sizes there is no need to load it in each of the media queries. Only indicate the changes for that specific query without repeating yourself.</p> <p>so you would have<br /> <pre><code>/* DECLARE FONTS */ @font-face { font-family:&#39;BebasNeueRegular&#39;; src:url(&#39;http://localhost:8888/wordpress/wp-content/themes/enfold-child/fonts/BebasNeue-webfont.eot&#39;); src:url(&#39;http://localhost:8888/wordpress/wp-content/themes/enfold-child/fonts/BebasNeue-webfont.eot?#iefix&#39;) format(&#39;embedded-opentype&#39;),url(&#39;http://localhost:8888/wordpress/wp-content/themes/enfold-child/fonts/BebasNeue-webfont.woff&#39;) format(&#39;woff&#39;),url(&#39;http://localhost:8888/wordpress/wp-content/themes/enfold-child/fonts/BebasNeue-webfont.ttf&#39;) format(&#39;truetype&#39;),url(&#39;http://localhost:8888/wordpress/wp-content/themes/enfold-child/fonts/BebasNeue-webfont.svg#BebasNeueRegular&#39;) format(&#39;svg&#39;); font-weight:normal; font-style:normal; } h6 { font-family:BebasNeueRegular,Geneva,Arial,Helvetica,sans-serif !important; font-size:95pt; margin-bottom:-20px; letter-spacing:-0.0em !important; font-weight: 200 !important; } /* #Media Queries========================================================================================== */ /* Smaller than standard 960 (devices and browsers) */ @media only screen and (max-width:959px) { h6 { font-size:80pt !important; margin-bottom: 20px !important; } } /* Tablet Portrait size to standard 960 (devices and browsers) */ @media only screen and (min-width:768px) and (max-width:959px) { h6 { font-size:70pt !important; margin-bottom: -15px !important; } } /* All Mobile Sizes (devices and browser) */ @media only screen and (max-width:767px) { h6 { font-size:60pt !important; margin-bottom: -20px !important; } } /* Mobile Landscape Size to Tablet Portrait (devices and browsers) */ @media only screen and (min-width:480px) and (max-width:767px) { h6 { font-size:80pt !important; margin-bottom: -20px !important; } } /* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */ @media only screen and (max-width:479px) { h6 { font-size:50pt !important; margin-bottom: -10px !important; } }</code></pre> <p>Be careful when using a very broad selector like h6, it has no specificity and is defined many times in the theme with much higher specificity which will override/counterfeit your code very easily.</p> <p>You also do not need this block ... @media only screen and (max-width:767px) { ...or this block ....@media only screen and (max-width:959px) { .... can you think of one screen size where the blocks of code below it aren't already targeting it? the only reason for 767 that i can think of is for the dropdown menu for all small screens, but 959.... dont know</p> <p>Thanks,</p> <p>Nick </p> 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/ <p>Hi,</p> <p>I will need to see the page where this is taking place, you can use goo.gl to mask the url.</p> <p>Thanks,</p> <p>Nick </p> http://www.kriesi.at/support/topic/subscription-field-cta-on-layerslider#post-111949 Fri, 17 May 2013 15:13:50 +0000 relaxer88 111949@http://www.kriesi.at/support/ <p>Hey,</p> <p>great theme, really enjoy using it, kudos to all of you! :)</p> <p>I got an issue which is really important to me - I want to place a subscription field (i.e. input for email) + CTA button on the layerslider and I need it to be "somehow" responsive. I know already that responsiveness is hardly possible at the current state. Sill, how do I get the field + button on there and enable the button to at least "jump" to the next line once the screen is small enough, so it does NOT go beyond the screen boundaries in the same row? (would be ok for me if the size of the field + button stay the same)</p> <p>Field + button should be quite big, cf. the size of the CTA button in a promo field. However, the design itself should be "flat", cf. the regular contact forms in the theme.</p> <p>How can I best approach this? Either with the theme's contact form or with a separate plugin, such as Contact Form 7. Doesn't matter. </p> <p>Huge thanks for your help!<br /> r88 </p>