Header is cut off in mobile version

  • Profile Image
    Clare 
    Asked on May 06, 2016 at 11:30 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
    Charlie
    Answered on May 06, 2016 at 11:57 AM

    Please note that our forum is only for JotForm related products. In your case, I believe your concern is more related on the overall website you are building using Weebly. If that is the case, you will need to contact the support team in Weebly's website.

    I'm checking your email and account, and I do not see any JotForm forms there. I also do not see any forms in your website and the CSS code that you have doesn't seem to be related to ours.

    If I misunderstood your concern, please let us know.