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

  • Profile Image
    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?

  • Profile Image
    Welvin
    Answered 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.

  • Profile Image
    Mike 
    Answered on June 13, 2016 at 01: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;}

    }

  • Profile Image
    Welvin
    Answered on June 13, 2016 at 01: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.

  • Profile Image
    mike 
    Answered on June 13, 2016 at 02: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 

  • Profile Image
    Mike Baran 
    Answered on June 13, 2016 at 03:05 PM

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

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

  • Profile Image
    Welvin
    Answered on June 13, 2016 at 03: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.