Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • February 18, 2016 at 11:23 pm #585791
    lionel

    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

    February 21, 2016 at 4:46 pm #586690
    Josue

    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

    February 22, 2016 at 4:01 pm #587225
    lionel

    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

    February 23, 2016 at 5:48 pm #587849
    Josue

    Hey!

    Your site is currently not loading:
    503 Service Unavailable

    Regards,
    Josue

    February 23, 2016 at 10:08 pm #587998
    lionel

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

    February 25, 2016 at 2:40 pm #589112
    Andy

    Hey!

    authentication login is needed. Please provide us credentials.

    Regards,
    Andy

    February 25, 2016 at 5:52 pm #589299
    lionel

    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 ;-)

    February 29, 2016 at 5:34 pm #590983
    Andy

    Hi!

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

    Regards,
    Andy

    February 29, 2016 at 7:02 pm #591026
    lionel

    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

    March 2, 2016 at 11:19 am #592013
    Ismael

    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

    March 10, 2016 at 5:07 pm #596377
    lionel

    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!

    March 10, 2016 at 8:51 pm #596554
    Josue

    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, 8 months ago by Josue.
    March 10, 2016 at 9:43 pm #596577
    lionel

    Implemented and working!
    Thank you Josue!

    March 10, 2016 at 10:34 pm #596592
    Josue

    You are welcome, glad to help :)

    Regards,
    Josue

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