http://www.kriesi.at/support/topic/menu-slider-display-problems-on-vertical-tablet Support Forum - Topic: Menu & Slider Display Problems on Vertical Tablet en-US Wed, 19 Jun 2013 03:20:00 +0000 http://bbpress.org/?v=1.0.2 q http://www.kriesi.at/support/search.php http://www.kriesi.at/support/topic/menu-slider-display-problems-on-vertical-tablet#post-87523 Tue, 11 Dec 2012 00:04:25 +0000 Ismael 87523@http://www.kriesi.at/support/ <p>Hi,</p> <p>You can add media queries like this on your custom.css</p> <pre><code>/* All Mobile Sizes (devices and browser) */ @media only screen and (max-width: 1024px) { .featured_caption { font-size: 10px; } }</code></pre> <p>Regards,<br /> Ismael </p> http://www.kriesi.at/support/topic/menu-slider-display-problems-on-vertical-tablet#post-87513 Mon, 10 Dec 2012 22:52:11 +0000 alexweintraub 87513@http://www.kriesi.at/support/ <p>That improved the menu on the vertical tablet. Thanks. But the slider still has cut off text. </p> <p>Could I decrease the font-size on the slider for vertical tablet? If so, how can I do that?</p> <p>Thanks,</p> <p>Alex </p> http://www.kriesi.at/support/topic/menu-slider-display-problems-on-vertical-tablet#post-86748 Thu, 06 Dec 2012 07:24:42 +0000 Devin 86748@http://www.kriesi.at/support/ <p>Hi Alex,</p> <p>With that wide of a menu I'd recommend just changing the width at which the mobile menu comes up. So right now its set to show up at screen sizes less than 768px. So in avia.js in the js folder of your theme files you can look for this line:<br /> <code>switchWidth: 768, //width (in px to switch at)</code></p> <p>change the 768 to 929 and save the file.</p> <p>See if that gets you closer to something that would work for you. </p> <p>Regards,</p> <p>Devin </p> http://www.kriesi.at/support/topic/menu-slider-display-problems-on-vertical-tablet#post-86643 Wed, 05 Dec 2012 16:33:03 +0000 alexweintraub 86643@http://www.kriesi.at/support/ <p>Hi,</p> <p>I am using the Choices theme and I am having difficulty displaying the menu and slider correctly on the vertical tablet. Mobile devices and landscape tablet are fine. But vertical tablet the menu wraps to two lines, and the first item overlays the logo, and the last item is over the slider. Also, slider text is cutt off. And the small header info overlays part of the logo. </p> <p>The dev. site can be found here: <a href="http://www.stlouisunionroofing.com/wp/" rel="nofollow">http://www.stlouisunionroofing.com/wp/</a> </p> <p>How do you suggest to correctly display the menu and slider on the vertical tablet? Should I use mobile size display settings? If so, how? </p> <p>I have made some minor customizations to the theme's quick CSS. Related changes are shown below:</p> <p>--------------------------------------------------------------</p> <p>#header .container {<br /> min-height: 140px;<br /> z-index: 100;<br /> overflow: visible;<br /> background: none;<br /> }</p> <p>.main_menu {<br /> float: right;<br /> clear: both;<br /> position: relative;<br /> z-index: 100;<br /> padding: 0;<br /> line-height: 30px;<br /> height: 15px;<br /> margin: 23px -30px;<br /> }</p> <p>div .logo {<br /> padding: 10px 0 0px 0;<br /> min-height: 100px;<br /> }</p> <p>.logo, .logo a {<br /> float: left;<br /> padding: 0;<br /> position: relative;<br /> margin-bottom: -19px;<br /> display: block;<br /> }</p> <p>.social_bookmarks{display:none}<br /> .header_meta{text-align:right;margin-top:-30px;width:auto;;}<br /> .small_header_info{display:inline;margin-right:20px;bottom:0;top:5px;position:relative;}</p> <p>/* All Mobile Sizes (devices and browser) */<br /> @media only screen and (max-width: 767px) {<br /> .responsive .header_meta{height:auto;margin-top:-10px;width:auto;text-align:center;}<br /> .small_header_info{display:block;}<br /> }</p> <p>#searchform {<br /> display: none;<br /> }</p> <p>--------------------------------------------------------------------------------</p> <p>Please let me know what you suggest.</p> <p>Thanks,</p> <p>Alex </p>