Header is cut off in mobile version

  • Profile Image
    Clare 
    Asked on May 06, 2016 at 11:28 AM

    I've built a site using Weebly but now when I open it on a mobile part of the header is cut off.  I can't work out which code I need to alter to fix this. 

    This is the code in the 'main_style.css' for 'mobile devices' 

    @media (max-width: 767px) {

      

      /* General */

     

      

      body {

      font-size: 12px;

      }

     

      .wsite-multicol-col {

        max-width: 100% !important;

        display: block;

        width: auto !important;

        margin: 0 auto 1em !important;

      }

      

      /* Layouts */

      

      #banner-inner {

        width: 100%;

      }

      

      #banner-inner td {

        display: block;

        text-align: left;

      }

     

    .wsite-logo {

    font-size: 1.75em;

    }

     

    .wsite-logo, .wsite-logo * {

        display: block;

        max-width: 100%;

     margin: 0 !important;

    }

     

      #banner h2 {

        font-size: 3em !important;

      }

      

      #banner h2 span, #banner h2 font, #banner p span, #banner p font {

        font-size: inherit !important;

        line-height: inherit !important;

      }

      

      .splash-content {

        width: 100%;

        padding: 0;

      }

      

      .landing-page #banner {

        height: 26em;

     

      }

      

      .tall-header-page #banner {

        height: 20em;

      }

      

      .short-header-page #banner {

      height: 14em;

      }

      

      .short-header-page #banner-inner h2 .wsite-headline, .no-header-page #banner-inner h2 .wsite-headline {

        padding-left: 0 !important;

        background: none !important;

      }

      

      .short-header-page #banner-inner h2, .no-header-page #banner-inner h2, .short-header-page .wsite-logo, .no-header-page .wsite-logo {

        float: none !important;

      }

     

    /* Gallery */

      

      .imageGallery .halfwidth-mobile {

        width: 50% !important;

      }

      

    .galleryCaptionHolder {

    display: none !important;

    }

      /* Cart */

      

     

      #wsite-mini-cart {

        padding: 2em 2em 0em !important;

      }

     

      /* Store */

      

      .wsite-com-sidebar, .wsite-com-content-with-sidebar {

        display: block;

        width: 100%;

        margin: 0 auto;

        padding: 0;

        text-align: center;

      }  

      

      .wsite-com-sidebar {

        margin-bottom: 2em;

      }

     

      #wsite-com-store .wsite-com-category-subcategory-group .wsite-com-column, #wsite-com-store .wsite-com-category-product-featured-group .wsite-com-column,  #wsite-com-store .wsite-com-category-product-group .wsite-com-column {

        width: 50% !important;

      }

     

      #wsite-com-product-images {

        width: 100% !important;

      }

      

      #wsite-com-product-images, #wsite-com-product-images .wsite-com-column {

        float: none !important;

      }

      

      #wsite-com-product-info {

        margin-left: 0 !important;

        margin-top: 25px;

      }

      

      /* Blog */

      

      #blogTable > tbody > tr > td {

        display: block !important;

        width: 100% !important;

        margin: 0 auto;

        padding: 0 !important;

      }

      .blog-body {

        float: none !important;

      }

      .blog-header {

        text-align: left;

      }

      .blog-sidebar .column-blog {

        width: 100%;

        float: none;

        padding-top: 3em;

        border-top: 1px solid $btnHLnormal;

      }

      

      #commentPostDiv .commentInput, #commentPostDiv .commentTextarea {

        padding: 0 12px !important;

      }

      

     

    Thanks for any help! 

  • Profile Image
    victor
    Answered on May 06, 2016 at 11:52 AM

    Sorry for the inconvenience. Could you please provide the direct URL of where you have embedded your form. We will be glad to help resolve the issue.