Elements in the website are not showing when custom CSS is added

  • Mike
    Asked on June 13, 2016 at 12:36 PM

    Hi there, I have tried using your css Carina and it works but I have a site (in beta right now) that has divs flying in and your css, due to the

     html {background: overflow: hidden; 

     

    doesn't allow those items to be seen.  Any idea how I could get this fixed?

  • Welvin Support Team Lead
    Replied on June 13, 2016 at 12:58 PM

    Did you add the CSS to your form or to your website? The custom CSS codes should be added in your form, not to your website. It shouldn't affect any part of your website. Can you share us the page link here? We'd like to check.

  • Mike
    Replied on June 13, 2016 at 1:08 PM

    go here

    http://radiuscleveland.com/tgradius2/index.html

     

    check out the css here

    http://radiuscleveland.com/tgradius2/styles.css

     

    @media screen and (min-width: 768px) and (max-width: 1024px) {

    #homepageheader {

        background-image: url(images/Trademark-global-endless-aisle-new2-ipad.jpg);

        background-size: inherit;

        background-attachment: fixed;

        background-position: top;

        width: 100%;

        height: 307px;

        position: relative;

        top: 150px;

        z-index: 99999;

    }

    #homepagewhatwedotitle{

        z-index: 99998;}

    .sticky-div {

        background-image: url(images/warehouse-instant-drop-shipping-ipad.jpg);

        background-size: inherit;

     

    }

     

    body {

    margin-left: 0px;

    margin-top: 0px;

    margin-right: 0px;

    margin-bottom: 0px;   

    background: url(images/Trademark-global-endless-aisle-new-bw1024.jpg) no-repeat top center fixed;

      -webkit-background-size: cover;

      -moz-background-size: cover;

      -o-background-size: cover;

      background-size: cover;

        background-attachment: fixed;height:100%;overflow: scroll;-webkit-overflow-scrolling: touch;

    }

    html {background: url('images/Trademark-global-endless-aisle-new-bw.jpg') no-repeat top center fixed;background-size: cover;height: 100%;overflow: hidden;}

    }

    @media screen and (max-width: 964px) {

    .photoStrip {

        margin-top: 24%;

    }

    }

    @media screen and (max-width: 959px) {

    .sticky-div {

        height: 282px;

        overflow: hidden;

        background-position-x: 79%;

    }

    }

    @media screen and (max-width: 769px) {

    .header {

        font-size: 46px;

    }

    .subheader {

        font-size: 29px;

    }

    .subheadersm3 {

        font-size: 20px;

    }

    .subheadersm {

        font-size: 20px;

        padding-right: 57px;

    }

    body {

    margin-left: 0px;

    margin-top: 0px;

    margin-right: 0px;

    margin-bottom: 0px;   

    background: url(images/Trademark-global-endless-aisle-new-bw768.jpg) no-repeat top center fixed;

      -webkit-background-size: cover;

      -moz-background-size: cover;

      -o-background-size: cover;

      background-size: cover;

        background-attachment: fixed;

    height:100%;overflow: scroll;-webkit-overflow-scrolling: touch;

    }

    html {background: url('images/Trademark-global-endless-aisle-new-bw.jpg') no-repeat top center fixed;background-size: cover;height: 100%;overflow: hidden;}

    #homepageheader {

        z-index: 99999;

    }

    #homepagewhatwedotitle{

        z-index: 99998;}

    }

  • Welvin Support Team Lead
    Replied on June 13, 2016 at 1:57 PM

    Can you please tell us where's the flying element that you've mentioned on this website? The fixed header? Can you take a screenshot and post it here? To upload a screenshot to this support forum, please follow this guide: https://www.jotform.com/answers/277033

    Again, you should not add the custom CSS codes in your current website stylesheet. You should add it in the form. Here's how to add: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes.

  • mike
    Replied on June 13, 2016 at 2:41 PM

    Sorry, I'm not using a form - just building a website.  If you make your window screen larger than 1024px you will see the homepage animations 

  • Mike Baran
    Replied on June 13, 2016 at 3:05 PM

    go here instead now as I have to update that other beta site

    http://radiuscleveland.com/tgradius3/index.html

  • Welvin Support Team Lead
    Replied on June 13, 2016 at 3:53 PM

    I'm sorry, but we cannot help if this is not related with Jotform. You are using Dreamweaver, you may consider contacting their support (https://helpx.adobe.com/dreamweaver.html?promoid=SYBNM4JX&mv=other) for this matter.