http://www.kriesi.at/support/tags/mobile-view Support Forum - Tag: mobile view - Recent Posts en-US Wed, 19 Jun 2013 19:35:59 +0000 http://bbpress.org/?v=1.0.2 q http://www.kriesi.at/support/search.php http://www.kriesi.at/support/topic/main-offset#post-118286 Fri, 14 Jun 2013 06:19:07 +0000 Ismael 118286@http://www.kriesi.at/support/ <p>Hi,</p> <p>I check it further and I can see the gap on the main div. Add this on your custom.css</p> <p>/*<br /> Mobile Styles<br /> ================================================== */<br /> /* Note: Add new css to the media query below that you want to only effect the Mobile and Tablet Portrait view */</p> <pre><code>@media only screen and (max-width: 900px) { /* Add your Mobile Styles here */ #main { margin-top: 0; } }</code></pre> <p>Regards,<br /> Ismael </p> http://www.kriesi.at/support/topic/main-offset#post-118283 Fri, 14 Jun 2013 06:15:46 +0000 Ismael 118283@http://www.kriesi.at/support/ <p>Hi,</p> <p>I checked your website on a mobile device but I don't see the black border. Can you give us a screenshot? In what mobile device is this happening?</p> <p>Regards,<br /> Ismael </p> http://www.kriesi.at/support/topic/main-offset#post-118109 Thu, 13 Jun 2013 15:29:35 +0000 mirzepapa 118109@http://www.kriesi.at/support/ <p>Hi,<br /> on <a href="http://www.musikzentrale.net" rel="nofollow">http://www.musikzentrale.net</a> i am using an 152px offset from top to achieve the fixed header along with social icons, phone number and footer navigation:</p> <p>This is to have the UberMenu in position, which i am using instead of the enfold`s origin menu, since it offers some more modification methods that i want.</p> <p>On mobile devices i do now face a black border on top of the main section and i do have no idea, how to get rid of it. Here is my custom.css styling the header &amp; main:</p> <p>#header {<br /> position: fixed;<br /> box-shadow: 0 0 0.5em rgba(0, 0, 0, 0.5);<br /> }</p> <p>#main {<br /> margin-top: 152px;<br /> }</p> <p>#wrap_all {<br /> position: absolute;<br /> width: 100%;<br /> z-index: 1;<br /> }</p> <p>Thanks for your help,<br /> Cheers, Sebastian. </p> http://www.kriesi.at/support/topic/sidebar-not-visible-for-mobile-view#post-117972 Thu, 13 Jun 2013 05:28:23 +0000 rinoy 117972@http://www.kriesi.at/support/ <p>thanks this worked. </p> http://www.kriesi.at/support/topic/sidebar-not-visible-for-mobile-view#post-117612 Tue, 11 Jun 2013 14:11:30 +0000 Devin 117612@http://www.kriesi.at/support/ <p>Hi rinoy,</p> <p>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) { .responsive #top #main .sidebar {display:block !important; clear: both; } }</code></pre> <p>Regards,</p> <p>Devin </p> http://www.kriesi.at/support/topic/sidebar-not-visible-for-mobile-view#post-117110 Sat, 08 Jun 2013 04:03:54 +0000 rinoy 117110@http://www.kriesi.at/support/ <p>Hi, when i view the site in mobile or tablet the sidebars disappears. Instead I want it to show below the content of the page (in mobile/ tablet view only) &amp; below that the footer widgets as it now. </p> http://www.kriesi.at/support/topic/large-logo-causes-problems-with-fixed-header-and-mobile-view#post-114262 Tue, 28 May 2013 01:26:11 +0000 tacoverde 114262@http://www.kriesi.at/support/ <p>THANK YOU! </p> <p>That did it, I am so happy now :) </p> http://www.kriesi.at/support/topic/large-logo-causes-problems-with-fixed-header-and-mobile-view#post-113730 Sat, 25 May 2013 07:55:45 +0000 Dude 113730@http://www.kriesi.at/support/ <p>Yes, you need to use ftp to download/update the file. Connect your ftp client to your server and navigate to wp-content/themes/enfold/js. There you'll find avia.js. Download the file, edit it and upload it again (overwrite the old file). </p> http://www.kriesi.at/support/topic/large-logo-causes-problems-with-fixed-header-and-mobile-view#post-113685 Sat, 25 May 2013 04:39:26 +0000 tacoverde 113685@http://www.kriesi.at/support/ <p>Great... where do I find /js/avia.js ?<br /> Sorry, I'm a beginner. I tried to look for it in Wordpress under Appearance/Editor, but I couldn't find it. </p> http://www.kriesi.at/support/topic/large-logo-causes-problems-with-fixed-header-and-mobile-view#post-113620 Fri, 24 May 2013 18:15:46 +0000 Nick 113620@http://www.kriesi.at/support/ <p>Hi,</p> <p>Please open up /js/avia.js and find line 767 that looks like<br /> <pre><code>el_height = $(elements).filter(&#39;:first&#39;).height(),</code></pre> <p> and change it to look like</p> <pre><code>el_height = 116,</code></pre> <p>You also have to take out any css modifications you've made that sets the size of your image somewhere else.</p> <p>*make a text file where you keep track of files and line numbers that you are changing so that way you have a record for yourself of all your customizations.</p> <p>Thanks,</p> <p>Nick </p> http://www.kriesi.at/support/topic/large-logo-causes-problems-with-fixed-header-and-mobile-view#post-113412 Fri, 24 May 2013 00:51:57 +0000 tacoverde 113412@http://www.kriesi.at/support/ <p>Ok, still not sure that you understand what I'm trying to do.</p> <p>My logo is 231 x 116, I want it to display that way (not smaller). I like how the fixed header in Enfold is designed; the logo shrinks as the reader scrolls down the page. But, when I put my larger logo in, it doesn't do that anymore. Also, the larger logo gets cut off (you can't see the bottom half) when it's viewed on a mobile phone.</p> <p>... do I make sense? </p> http://www.kriesi.at/support/topic/large-logo-causes-problems-with-fixed-header-and-mobile-view#post-113152 Thu, 23 May 2013 04:11:44 +0000 Nick 113152@http://www.kriesi.at/support/ <p>Hi,</p> <p>Anything is possible. Can even have the logo become even larger than it initially is instead of becoming smaller. Not an expert on what's normal, but if you want to tell me what size you will have initial logo at and what size you want it to shrink to, I can give you the code that will do it.<br /> <pre><code>strong.logo img, #header_main .container, .main_menu ul:first-child &gt; li a { height: 116px !important; line-height: 116px !important; }</code></pre> <p>Try this. add it to your /css/custom.css or to Quick CSS located in Enfold &gt; Layout (Theme Options) ... the text area at the bottom of that page</p> <p>Thanks,</p> <p>Nick </p> http://www.kriesi.at/support/topic/large-logo-causes-problems-with-fixed-header-and-mobile-view#post-113123 Thu, 23 May 2013 02:43:59 +0000 tacoverde 113123@http://www.kriesi.at/support/ <p>Please, por favor!!!</p> <p>I do not care about the fuzzy logo, that is not what I asked.... I'm sorry to sound frustrated, but it's the truth. I have a fuzzy logo because my graphic designer sent me a logo that is originally 200 x 100, but it was too small! So I enlarged it, and now it is fuzzy. I will ask her to make me a non fuzzy logo in a larger size. But only once I find out (from you guys) if it is possible to have a large logo and have the site function in the 2 ways that I mentioned above (please read well before responding). </p> <p>Please, let me know how I can have a larger logo than the specified 200 x 100 and still have the header shrink as I scroll down and also to look normal (not get cut off) when in mobile view. </p> http://www.kriesi.at/support/topic/large-logo-causes-problems-with-fixed-header-and-mobile-view#post-113074 Wed, 22 May 2013 20:26:31 +0000 Nick 113074@http://www.kriesi.at/support/ <p>Hi,</p> <p>Your logo is 231x116 , however it is being displayed shrunken at 155x88 (this is why the logo is fuzzy. Your options are (if size the way you see it on page now is ok with you, then you would need to use a photo editor to resize your logo to 155x88 and reupload it.</p> <p>If you want to make room and display your logo in its full size. But first here, <a href="http://i.imgur.com/lPpDOIw.png" rel="nofollow">http://i.imgur.com/lPpDOIw.png</a>, install this size logo , I made it 155x88 and see how it looks, it will no longer be fuzzy</p> <p>Thanks,</p> <p>Nick </p> http://www.kriesi.at/support/topic/large-logo-causes-problems-with-fixed-header-and-mobile-view#post-112746 Tue, 21 May 2013 20:01:13 +0000 tacoverde 112746@http://www.kriesi.at/support/ <p>Thanks for replying :) ... </p> <p>So I got rid of all the other css except the one you mentioned, and the header resized my logo to a small logo (not 116 height)...</p> <p>I'm a total beginner, so looking at the css of that other guys website is kinda crazy! I just know from searching the Enfold forum that a couple other people have asked how to make their logo bigger and they were given some custom css. The following link is for a guy who wanted his logo wider:</p> <p><a href="http://www.kriesi.at/support/topic/what-do-i-need-to-adjust-to-make-my-logo-bigger" rel="nofollow">http://www.kriesi.at/support/topic/what-do-i-need-to-adjust-to-make-my-logo-bigger</a></p> <p>And this link is a thread from the guy who owns the website I used as an example above:</p> <p><a href="http://www.kriesi.at/support/topic/problem-with-header-logo-and-menu" rel="nofollow">http://www.kriesi.at/support/topic/problem-with-header-logo-and-menu</a></p> <p>I tried using the padding css that you mentioned and then adding the "logo size" css:</p> <p>.logo, .logo a, .logo a img {<br /> width: 232px;<br /> height: 116px;<br /> }</p> <p>And what happens is that I get the size logo I want, but it drops down out of the header. However, for now I took out the "logo size" css so that you could check out how it has resized my logo to a small logo... </p> http://www.kriesi.at/support/topic/large-logo-causes-problems-with-fixed-header-and-mobile-view#post-112662 Tue, 21 May 2013 13:15:06 +0000 Devin 112662@http://www.kriesi.at/support/ <p>Hi tacoverde,</p> <p>When you use !important after css, it forces that css to take effect above all else. So when you added that to your header height, it forces the header to stay the same size even when scrolling down.</p> <p>Just adding a larger logo means you shouldn't have to use any css to adjust the logo at all as the header should resize automatically. So all you really need is the:<br /> <pre><code>.fixed_header #main { padding-top: 120px; }</code></pre> <p>from the other site you see the same effect on, you can look at the css they used here: <a href="http://50.116.98.244/~service/wp-content/uploads/dynamic_avia/casa_blanca.css?ver=1" rel="nofollow">http://50.116.98.244/~service/wp-content/uploads/dynamic_avia/casa_blanca.css?ver=1</a></p> <p>Regards,</p> <p>Devin </p> http://www.kriesi.at/support/topic/large-logo-causes-problems-with-fixed-header-and-mobile-view#post-112444 Mon, 20 May 2013 14:39:53 +0000 tacoverde 112444@http://www.kriesi.at/support/ <p>Hoping this might help you guys...<br /> I don't know for sure, but I think I found someone else's site that uses this theme with a slightly bigger logo and it works properly in the ways I'm having trouble with.</p> <p><a href="http://50.116.98.244/~service/" rel="nofollow">http://50.116.98.244/~service/</a></p> <p>And here's a link to his post on the forum... he asks the same questions I do, although the only answer is in regards to the slider position. But either way, it seems like he figured out the rest on his own... so it must be possible.</p> <p><a href="http://www.kriesi.at/support/topic/problem-with-header-logo-and-menu" rel="nofollow">http://www.kriesi.at/support/topic/problem-with-header-logo-and-menu</a> </p> http://www.kriesi.at/support/topic/large-logo-causes-problems-with-fixed-header-and-mobile-view#post-112339 Mon, 20 May 2013 05:16:06 +0000 tacoverde 112339@http://www.kriesi.at/support/ <p>I am want to have a larger logo but I also want the theme to function properly.<br /> I have entered the following code to make the logo larger and to bring the slider down a bit (based on what I found in other threads):</p> <p>.logo, .logo a, .logo a img {<br /> width: 232px;<br /> height: 116px;<br /> }</p> <p>#header_main .container, .main_menu ul:first-child &gt; li &gt; a {<br /> height: 120px !important;<br /> line-height: 120px !important;<br /> }</p> <p>.fixed_header #main {<br /> padding-top: 120px;<br /> }</p> <p>However, there are 2 major problems:</p> <p>1) The fixed header does not resize to a smaller size when one scrolls down<br /> 2) The bottom of the logo gets cut off when you reduce the browser's window size or view it on a cell phone</p> <p>Please help me with this... it seems fairly important because not everyone's logo is going to look good at a small size.<br /> Here's a link to my site (never mind the horribly fuzzy logo):</p> <p><a href="http://www.tropicaltaylor.com" rel="nofollow">http://www.tropicaltaylor.com</a> </p> http://www.kriesi.at/support/topic/help-with-menu-rollover-images#post-104580 Fri, 05 Apr 2013 23:03:43 +0000 eldiablosf 104580@http://www.kriesi.at/support/ <p>Awesome, thank you very much! </p> http://www.kriesi.at/support/topic/help-with-menu-rollover-images#post-104513 Fri, 05 Apr 2013 13:10:50 +0000 Devin 104513@http://www.kriesi.at/support/ <p>No, if that is your only issue (the scrunching) you can just change the value as needed. </p> <p>If you wanted to add your own media queries, its pretty simple if you know a bit of css. Here is the template I used to start if you are interested in going that route:</p> <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>Regards,</p> <p>Devin </p> http://www.kriesi.at/support/topic/help-with-menu-rollover-images#post-104406 Thu, 04 Apr 2013 19:58:44 +0000 eldiablosf 104406@http://www.kriesi.at/support/ <p>Or, I guess, if I reduce the padding between the menu icons, it wont stretch all the way across to the right, and will make it less likely to go on the second line before changing to the drop down menu, right?.... hmm... </p> http://www.kriesi.at/support/topic/help-with-menu-rollover-images#post-104405 Thu, 04 Apr 2013 19:56:32 +0000 eldiablosf 104405@http://www.kriesi.at/support/ <p>Oh, I see now the threshold is in js/avia.js</p> <p>If I set it to say 1024px, will this cause problems on certain mobile devices? Cause at this point, I'd rather have the drop down menu on all devices than show overlapping images. </p> http://www.kriesi.at/support/topic/help-with-menu-rollover-images#post-104398 Thu, 04 Apr 2013 18:22:05 +0000 eldiablosf 104398@http://www.kriesi.at/support/ <p>Actually, I didn't. I just inserted simple rollover code into the menu items. I can see that with plain text, they stack nicely on top of each other, but with the images, end up overlapping each other. pls see here: <a href="http://www.erosmortis.com/shop-entrance/" rel="nofollow">http://www.erosmortis.com/shop-entrance/</a></p> <p>Cant I just decrease the threshold at which the menu changes to the drop down, so that it changes to the drop down much earlier instead of scrunching? I just cant seem to find it.</p> <p>thnks! </p> http://www.kriesi.at/support/topic/help-with-menu-rollover-images#post-104304 Thu, 04 Apr 2013 12:09:56 +0000 Devin 104304@http://www.kriesi.at/support/ <p>Hi eldiablosf,</p> <p>That is the way it is supposed to work, but my guess is you used some !important values for your buttons which is causing the responsive code not to work properly.</p> <p>Regards,</p> <p>Devin </p> http://www.kriesi.at/support/topic/help-with-menu-rollover-images#post-104094 Tue, 02 Apr 2013 23:39:11 +0000 eldiablosf 104094@http://www.kriesi.at/support/ <p>Hi There! </p> <p>I added some rollover images to the theme's menu, which worked out great. however, upon viewing on iphone5, in vertical view, the menu, instead of turning into drop down menu like it's supposed to, it ends up just stacking the menu images on top of each other in a second line. </p> <p>I've also noticed that when I re-size my browser window, first it squishes the menu like that and then past a certain threshold, it will convert to the mobile menu. </p> <p>Is there a way to make it just go to the drop-down menu instead of squishing like this?</p> <p>thanks! </p> http://www.kriesi.at/support/topic/wrap-around-text-in-mobile-view#post-88540 Mon, 17 Dec 2012 08:33:58 +0000 Nick 88540@http://www.kriesi.at/support/ <p>Hi,</p> <p>Please try this css<br /> <pre><code>#main.container_wrap p.intro { font-size: 1.5em; line-height: 1em!important; margin-bottom: 40px; diplay: block; }</code></pre> <p>Thanks,</p> <p><a href="http://i.imgur.com/2bjdx.png" rel="nofollow">http://i.imgur.com/2bjdx.png</a></p> <p>Nick </p> http://www.kriesi.at/support/topic/wrap-around-text-in-mobile-view#post-88461 Sun, 16 Dec 2012 13:33:47 +0000 susan_ideology 88461@http://www.kriesi.at/support/ <p>Hi nick, just looking at the screen shot that you sent, it shows the problem I was trying to explain. There should be some padding/white space in mobile view between the bottom of the image and first line of text "Following Adam..."</p> <p>There is such a break/white space if you look at the page layout in all other screen sizes - the text automatically lines up to the right of and underneath the image with some padding. But this does not happen when you switch to mobile view.</p> <p>When I have done something similar in twenty eleven, and the colums shift down to the one, this spacing happens automatically rather than having to create a specific media query rule.</p> <p>Susan </p> http://www.kriesi.at/support/topic/wrap-around-text-in-mobile-view#post-88205 Fri, 14 Dec 2012 15:26:47 +0000 Nick 88205@http://www.kriesi.at/support/ <p>Hi,</p> <p>I looked through Chrome and Safari and the last 2 words above the image are 'historical document' and the two words below the image are ' 'Following Adam'. Nothing even looks close to moving towards the image. <a href="http://i.imgur.com/ND97i.png" rel="nofollow">http://i.imgur.com/ND97i.png</a></p> <p>What browser are you using? with what OS?</p> <p>Thanks,</p> <p>Nick </p> http://www.kriesi.at/support/topic/wrap-around-text-in-mobile-view#post-88185 Fri, 14 Dec 2012 11:05:30 +0000 susan_ideology 88185@http://www.kriesi.at/support/ <p>Hi Nick, here is the link to the page with the troublesome image.<br /> <a href="http://goo.gl/hznBr" rel="nofollow">http://goo.gl/hznBr</a></p> <p>Susan </p> http://www.kriesi.at/support/topic/wrap-around-text-in-mobile-view#post-88053 Thu, 13 Dec 2012 16:39:24 +0000 Nick 88053@http://www.kriesi.at/support/ <p>Hi,</p> <p>You are being too abstract. We need to see the url to the page that has the image with this behavior in order to look at the code/css/nodes to see what exactly is happening and give you a concrete solution.</p> <p>Thanks,</p> <p>Nick </p>