htmlcsswordpress

I am using Avada theme, on wordpress goddady . Button and text inside container that is displayed in wordpress admin. for some reason it not displayed


In the link I have provided, just above footer you should see download here button. That whole container is not displayed in any device. It works correctly on wp-admin. I added this code block to generate that container. Please tell what might be causing the issue? Below are the plugins Installed

1)Akismet Anti-Spam 2)Classic Editor 3)Contact Form 7 4)Duplicate Page 5)Fusion Builder 6)Fusion Core 7)Gravity Forms 8)Health Check & Troubleshooting 9)Joinchat 10)Site Kit by Google 11)Slider Revolution 12)Unite Gallery Lite 13)UpdraftPlus - Backup/Restore 14)WP Htaccess Editor 15)Yoast SEO 16)301 Redirects

Maybe I am missing a plugin or installed plugin has issue. I cant determine the issue.

<div class="container7">
  <article>
    <h1>Procedure for installation of rooftop solar plant through National Portal</h1>
  </article>
  <div class="button-container">
    <a href="https://dynaroof.com/wp-content/uploads/2023/01/Step-Wise-Procedure_Residential_Solar.pdf" download rel="noopener noreferrer" class="styled-button1">
      Download Here
    </a>
  </div>
</div>

<style>
  .container7 {
    display: flex;
    flex-direction: row; 
    justify-content: center; 
    align-items: center; 
    background-color: #f89e09;
    border-radius: 10px;
    padding: 1rem;
    height: 11rem;
  }

  .container7 article {
    flex: 2;
    padding: 1rem;
    color: white; 
    font-weight: 500;
  }

  .container7 article h1 {
    color: white; 
    font-weight: 800;
  }

  .button-container {
    flex: 1;
    display: flex;
    justify-content: flex-start;
  }

  .styled-button1 {
    display: inline-block;
    padding: 0.8rem 1rem;
    background-color: #f76500;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-weight: 600;
    text-decoration: none;
  }

  .styled-button1:hover {
    background-color: #de110d; 
  }

  @media screen and (max-width: 768px) {
    .container7 {
      flex-direction: column;
      text-align: center;
    }

    .button-container {
      justify-content: center;
      margin-top: 1rem;
    }
    
    .container7 article {
      padding: 0.5rem;
    }
  }
</style>

I tried to enable and disable the plugins, that I have installed. So far I didnt see any plugin causing this issue. Earlier this was made using wordpress and wasnt displaying, so I changed it to codeblock, still not working. At bottom of this page you can find its not displaying at all, https://dynaroof.com/dyna-solar/


Solution

  • @A Haworth Thank you the Help. As stated by A Haworth It was a typo, and hence my component wasnt displaying. To find Typo repeat this steps - 1)go into the browser devtools inspect facility 2)copy all the html element (right click in mouse and selecting Edit HTML), 3) put it into my editor and searching for style