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 these steps:

    1. Open devtools in your browser
    2. Copy all of the html elements using right click and selecting Edit HTML,
    3. Paste the text into your editor and search for style or <style>