Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #18408

    Hi,

    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.

    The dev. site can be found here: http://www.stlouisunionroofing.com/wp/

    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?

    I have made some minor customizations to the theme’s quick CSS. Related changes are shown below:


    #header .container {
    min-height: 140px;
    z-index: 100;
    overflow: visible;
    background: none;
    }

    .main_menu {
    float: right;
    clear: both;
    position: relative;
    z-index: 100;
    padding: 0;
    line-height: 30px;
    height: 15px;
    margin: 23px -30px;
    }

    div .logo {
    padding: 10px 0 0px 0;
    min-height: 100px;
    }

    .logo, .logo a {
    float: left;
    padding: 0;
    position: relative;
    margin-bottom: -19px;
    display: block;
    }

    .social_bookmarks{display:none}
    .header_meta{text-align:right;margin-top:-30px;width:auto;;}
    .small_header_info{display:inline;margin-right:20px;bottom:0;top:5px;position:relative;}

    /* All Mobile Sizes (devices and browser) */
    @media only screen and (max-width: 767px) {
    .responsive .header_meta{height:auto;margin-top:-10px;width:auto;text-align:center;}
    .small_header_info{display:block;}
    }

    #searchform {
    display: none;
    }


    Please let me know what you suggest.

    Thanks,

    Alex

    #99342

    Hi Alex,

    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:

    switchWidth: 768, //width (in px to switch at)

    change the 768 to 929 and save the file.

    See if that gets you closer to something that would work for you.

    Regards,

    Devin

    #99343

    That improved the menu on the vertical tablet. Thanks. But the slider still has cut off text.

    Could I decrease the font-size on the slider for vertical tablet? If so, how can I do that?

    Thanks,

    Alex

    #99344

    Hi,

    You can add media queries like this on your custom.css

    /* All Mobile Sizes (devices and browser) */
    @media only screen and (max-width: 1024px) {
    .featured_caption {
    font-size: 10px;
    }
    }

    Regards,

    Ismael

Viewing 4 posts - 1 through 4 (of 4 total)

The topic ‘Menu & Slider Display Problems on Vertical Tablet’ is closed to new replies.