Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #585791

    Hi guys,

    Two small issues when customers are visiting our website with their tablets, in vertical mode:

    . The logo is not aligned anymore. I added this fix on the desktop view “.logo img { margin-top: 15px; }”, this is certainly why it looks like that. Any advice on how to create an exception on tablet/mobile vertical view – or either fix everything perfectly on all devices?

    . Our submenu is really long, because of the nature of our content on the page. Any chance we can change the font size on tablet vertical view?

    Thanks

    #586690

    Hey!

    1. A better fix would be to add vertical padding to the actual logo img.

    2. Not sure if reducing the font size will prevent the menu from going a second line, i’d suggest enabling the mobile menu earlier, you can do that with the following CSS code:

    @media only screen and (max-width: 767px)
    {
    	.responsive #top .sticky_placeholder{height:0px;}
    	.responsive #top .av-submenu-container{top: auto !important; position: relative !important; height:auto; }
    	
    	.responsive #top .av-menu-mobile-active {text-align: center; }
    	.responsive #top .av-menu-mobile-active .mobile_menu_toggle{display: inline-block;}
    	.responsive #top .av-menu-mobile-active .av-subnav-menu{display:none;}
    	
    	.responsive #top #wrap_all .av-menu-mobile-active.container {width:100%; max-width: 100%;}
    	.responsive #top .av-menu-mobile-active .av-open-submenu.av-subnav-menu{display:block;}
    	.responsive #top .av-subnav-menu > li:first-child{margin-top:-1px;}
    	.responsive #top .av-menu-mobile-active .av-subnav-menu  li{display:block; border-top-style: solid; border-top-width: 1px; padding:0;}
    	.responsive #top .av-menu-mobile-active .av-subnav-menu > li > a{border-left:none; padding:15px 15%; text-align: left;}
    	.responsive #top .av-menu-mobile-active .av-subnav-menu > li a:before{content: "\25B6"; position: absolute; top: 15px; margin-left: -10px; font-family: 'entypo-fontello'; font-size: 7px;}
    	.responsive #top .av-menu-mobile-active .av-subnav-menu li > ul{visibility:visible; opacity: 1; top:0; left:0; position: relative; width:100%; border:none;}
    	.responsive #top .av-menu-mobile-active.av-submenu-hidden .av-subnav-menu li > ul{display: none;}
    	.responsive #top .av-menu-mobile-active.av-submenu-hidden .av-subnav-menu li > ul.av-visible-sublist{display: block;}
    	
    	.responsive #top .av-menu-mobile-active .av-subnav-menu li > ul a{padding:15px 19%;}
    	.responsive #top .av-menu-mobile-active .av-subnav-menu li li > ul a{padding:15px 24%;}
    	.responsive #top .av-menu-mobile-active .av-subnav-menu li li li > ul a{padding:15px 29%;}
    
    }

    Cheers!
    Josue

    #587225

    Hi Josue,

    1/ I replaced margin by padding “.logo img { padding-top: 6.7%; }” but it simply crushed my logo.

    2/ I added the following css but it had no impact on the problem.

    The solutions didn’t work. My credentials are below if you want to try and have a look by yourself.

    Thanks

    #587849

    Hey!

    Your site is currently not loading:
    503 Service Unavailable

    Regards,
    Josue

    #587998

    What about now? fyi, i am moving to a new server soon ;-)

    #589112

    Hey!

    authentication login is needed. Please provide us credentials.

    Regards,
    Andy

    #589299

    Credentials were in my previous message. See below again.
    There is one first security screen, simply asking you to type a few letters and do an addition – shouldn’t be a problem ;-)

    #590983

    Hi!

    authentication login does not work for me. Please send credentials for this as well.

    Regards,
    Andy

    #591026

    Hi Andy

    Just checked the credentials from another computer and browser and they are perfectly working.
    As explained, you also have a first security screen, asking you to type a few letters and do an addition. You need to reply to this screen and then get access to the wp-admin login form.

    Thanks

    #592013

    Hey!

    We added this code in the Quick CSS field:

    @media only screen and (max-width: 989px)  and (min-width: 768px) { 
    .responsive .logo img {
        margin-top: 7%;
    }
    }

    Make sure to remove plugin cache and re-minify the scripts and styles file before checking the page.

    Best regards,
    Ismael

    #596377

    Hi Guys,

    Thanks, the logo is perfectly displayed on vertical view tablet, perfectly what we needed.

    Any solution for the submenu?
    “Our submenu is really long, because of the nature of our content on the page. Any chance we can change the font size on tablet vertical view?” The fix you gave me in your previous messages didn’t work unfortunately.

    Thanks!

    #596554

    Hi!

    Try adding this code to Quick CSS:

    @media only screen and (max-width: 1024px) {
        #top .av-subnav-menu > li > a {
            padding: 0 5px 0 5px;
        }
    }

    Cheers!
    Josue

    • This reply was modified 8 years, 9 months ago by Josue.
    #596577

    Implemented and working!
    Thank you Josue!

    #596592

    You are welcome, glad to help :)

    Regards,
    Josue

Viewing 14 posts - 1 through 14 (of 14 total)
  • You must be logged in to reply to this topic.