Okay
  Public Ticket #2867621
Why does my widget works perfectly in preview, but not on my site?
Open

Comments

  • WPman started the conversation

    Hi, I made a widget to display a popup style box using CSS only.  It works well in preview, everything work, however when I put it live on the site.  It does not work.  Can you guys tell me what is wrong?

    HTML

    <a class="button" href="#{{uc_id}}pop" id="{{uc_id}}">{{button_text|raw}}</a>

    <section id="{{uc_id}}pop">
    <div class="{{uc_id}}popup">
    <h2>{{popup_title|raw}}</h2>
    <a class="{{uc_id}}close" href="#">×</a>
    <div class="{{uc_id}}content">
    {{popup_content|raw}}
    </div>
    </div>
    </section>


    CSS

    #{{uc_id}} {
      padding: {{button_text_padding}}px;
      background: {{button_background_color}};
      border: {{button_border_size}}px solid {{button_border_color}};
      border-radius: {{button_border_radius}}px;
      text-decoration: none;
      cursor: pointer;
      transition: all 0.3s ease-out;
      display: inline-block;
    }

    #{{uc_id}}:hover {
      background: {{button_hover_color}};
    }

    #{{uc_id}}pop {
      position: fixed;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      background: rgba(0, 0, 0, 0.7);
      transition: opacity 500ms;
      display: none;
      opacity: 0;
    }

    #{{uc_id}}pop:target {
      display: block;
      opacity: 1;
    }

    .{{uc_id}}popup {
      margin: 70px auto;
      padding: 20px;
      background: #fff;
      border-radius: 5px;
      width: 30%;
      position: relative;
      transition: all 5s ease-in-out;
    }

    .{{uc_id}}popup h2 {
      margin-top: 0;
      color: {{popup_title_color}};
    }
    .{{uc_id}}popup .{{uc_id}}close {
      position: absolute;
      top: 20px;
      right: 30px;
      transition: all 200ms;
      font-size: 30px;
      font-weight: bold;
      text-decoration: none;
      color: #333;
    }
    .{{uc_id}}popup .{{uc_id}}close:hover {
      color: #06D85F;
    }
    .{{uc_id}}popup .{{uc_id}}content {
      max-height: 30%;
      overflow: auto;
    }

    @media screen and (max-width: 700px){
      .{{uc_id}}popup{
        width: 70%;
      }
    }

  •  759
    Amit replied

    do you have a link to check ?