Header with text widget- issue ipad

Support Forums for LiveMesh Themes & Plugins Forums Agile Theme Support Header with text widget- issue ipad

Tagged: ,

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #5040
    LeapLeap
    Member

    Hello,
    I am using the text widget in the header for my phone number; in the ipad the header is so large it takes up 1/2 the screen not allowing to see much of the content. (I do have a large logo 331px × 139px) The text widget drops down below the logo and causes the huge gap
    I have tried many changes in my child theme css to correct this problem: NO fix

    I’ve also had to tighten the css in the header just to make the header have less height with:

    #primary-menu {
    	margin-top: -40px;
    }

    Any help much appreciated have exhausted my understang of it.
    Thanks in advance!

    #5061
    NexusNexus
    Moderator

    Can you please provide us a link to your site? Thanks!

    #5075
    LeapLeap
    Member
    This reply has been marked as private.
    #5099
    RaghavendraRaghavendra
    Moderator

    It is a little frustrating to change things from Firebug or developer tools. A login would have helped. But here is what I could manage for now.

    #site-logo, #header.sticky #site-logo { top: 0; }
    #sidebar-header { position: absolute; right: 0; top: 0; }
    #sidebar-header a { margin-left: 20px;}
    #primary-menu > ul.menu > li > a { line-height: 120px; }
    .phone {
    text-align: right;
    padding-top: 5px;
    }
    
    @media screen and (max-width: 1024px) {
    	#site-logo a img { max-width: 250px; }
    }
    @media screen and (max-width: 767px) {
    	.phone { font-size:16px; }
    	#site-logo { padding-top: 20px; }
    }
    

    Remove the
    tag in the HTML inserted into the widget and change it to –

    123-345-5678

    Pls remove –

    #header.sticky #site-logo {
    	top: 5px;
    }
    #primary-menu > ul.menu > li > a {
    	line-height: 100px;
    }
    #site-logo {
    	top: 10px;
    	margin: 10px 10px 0px 20px;
    }
    #primary-menu {
    	margin-top: -40px;
    }
    
    /* Mobile layout */
    @media screen and (max-width: 767px) {
     #primary-menu {
    	margin-top: -20px;}
    	.phone {
    	padding-top:20px;
    }
    
    #5116
    LeapLeap
    Member
    This reply has been marked as private.
    #5121
    LeapLeap
    Member
    This reply has been marked as private.
    #5124
    RaghavendraRaghavendra
    Moderator
    This reply has been marked as private.
Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.