CODEWITHSUNDEEP
htmlcss
Mike
Mike

Reputation: 23

CSS displays differently on my website than it does when opening in browser with VS code editor

I have a form I created in Visual Studio Code that looks perfectly fine, however when I embed the code into my website via the embed code element, the email input box is aligned left. It should be centered. When the websites page opens, the input box is centered for a split second and then shifts left. The first image is what it looks like when opened in a browser via VS Code and the second image is what it looks like when opened in my website. My code is below the images. enter image description here enter image description here

<!DOCTYPE html>
<html>
<head>

    <style>
        /*Original CSS for animated text I found  */
        /*I changed the font size in .dynamic-texts li and then added top:0px to .dynamic-txts li*/
        @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
    *{
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'Poppins', sans-serif;
    }

    .wrapper{
      display: inline-block;
      
    }
    .wrapper .static-txt{
      color: #fff;
      font-size: 25px;
      margin-left:5px;
      line-height: 30px;
      font-weight: 400;
      margin-top:20px;
    }
    .wrapper .dynamic-txts {
      margin-left: 15px;
      height: 90px;
      line-height: 90px;
      overflow: hidden;
    }
    .dynamic-txts li{
      list-style: none;
      color: #FC6D6D;
      font-size: 20px;
      font-weight: 500;
      position: relative;
      top: 0;
      animation: slide 12s steps(4) infinite;
    }
    @keyframes slide {
      100%{
        top: -360px;
      }
    }
    .dynamic-txts li span{
      position: relative;
      margin: 5px 0;
      line-height: 90px;
    }
    .dynamic-txts li span::after{
      content: "";
      position: absolute;
      left: 0;
      top: 0px;
      height: 100%;
      width: 100%;
      background: #343F4F;
      border-left: 2px solid #FC6D6D;
      animation: typing 3s steps(10) infinite;
    }
    @keyframes typing {
      40%, 60%{
        left: calc(100% + 30px);
      }
      100%{
        left: 0;
      }
    }
    
      /*Original CSS for my form*/


        .Form-Back {
          background-color: #343F4F;
          display: block;
          text-align: center;
          padding: 3px;
          width: 360px;
          height: 320px;
        }
        
        input[type=submit] {
            display: inline-block;
            padding: 10px 30px;
            font-weight: 300;
            border-radius: 200px;
            transition: background-color 0.2s, border 0.2s, color 0.2s;
            font-size: 15px;
            
        }
        
        input[type=submit] {
            background-color: #ff0000;
            color: #fff;
            border: 1px solid #000;
            font-weight: bold;
        }
        
        input[type=submit]:hover,
        input[type=submit]:active {
            background-color: #ff5e5e;
        } 

        
        input[type=text] {
            display: inline-block;
            width: 250px;
            margin-bottom: 10px;
            height: 30px;
            text-align: center;
            
        }

    </style>

</head>

    <body>
        <div class="Form-Back">
            <form  action="https://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" `onsubmit="window.open('https://feedburner.google.com/fb/a/mailverify?uri=blogspot/BKkas', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
            <div class="wrapper">
                <div class="static-txt">Subscribe to Our Blog</div>
                <ul class="dynamic-txts">
                <li><span>Enter Your Email</span></li>
                <li><span>To get the most recent news</span></li>
                <li><span>delivered right to your inbox.</span></li>
                <li><span>SIGN-UP NOW!</span></li>
                </ul>
            </div>
            <p><input type="text" placeholder="Email Address" name="email"/></p><br/>
            <input type="hidden" value="blogspot/BKkas" name="uri"/>
            <input type="hidden" name="loc" value="en_US"/>
            <input type="submit" value="Submit" />
            
            </form>
        </div> 
    </body>

</html>

Upvotes: 1

Views: 233

Answers (1)

Korovjov
Korovjov

Reputation: 531

Then on this paragraph tag holding the input tag add following: style="display: flex; align-items: center; align-content: center; justify-content: center; This movement is happening because the css of your builder is messing with your css

Upvotes: 1

Related Questions