Multiple Elementor HTML/CSS Sections Work on Editor but not on Live Site
12:23 18 May 2024

I am using the latest version of Elementor Pro, Qwery theme (complete beginner in HTML/CSS and also not a native English speaker).

I am taking code from Codenpen (flip cards, etc) and putting it in the elementor html widget. Everything works perfectly until I duplicate the section. The flip card appears perfectly on the editor but not on the live site. I tried everything I previously read on stackoverflow and other places (regenerating css, clearing cache, etc). Also tried giving the two different sections, different ids and different classes.

The main problems are:

  • For some reason the title of the second section keeps the first section's link.

  • The title of the second section doesn't change when hovered.

You can check out the link to a short video snip I made showing the problem (the first sequence is the editor and the second is the live site).

Below you will find the code.

First section:



  

  
    

      
Καλέστε μας
 
    

    
    

      
      
+phone

    

    
  




.flip-card {
 background: linear-gradient(to left, #2493b4 0%, #f4e19f 100%);
  width: 300px;
  height: 300px;
  padding: 5px;
  border-radius: 1rem; 
    position: relative;
  z-index: 1;
  margin: auto;
  perspective: 1000px;

}

.thl{
     color: #2493b4;
  font-weight: bold;
  text-decoration: none;
  font-size: 30px;
    
}

.kaleste {
    color: #2493b4;
    font-weight: bold;
}


.flip-card-front {
  background-color: #f4e19f;
display: flex;
  justify-content: center;
  align-items: center;
   position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  border-radius: .7rem;
 
}


.flip-card-back {
     position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  border-radius: .7rem;
  background-color: #f4e19f;
  transform: rotateY(180deg);
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 20px;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
  box-shadow: 0 4px 8px 0 rgba(3,0,0,0.2);
}

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
  transition: 2s;

}

.flip-card-inner::after {
 position: absolute;
 content: "";
 top: 30px;
 left: 0;
 right: 0;
 z-index: -1;
 height: 100%;
 width: 100%;
 transform: scale(0.88);
 filter: blur(25px);
 background: #2493b4;
 transition: opacity 0.5s;

Second section:



  

  
    

      
ΣΤΕΙΛΤΕ ΜΑΣ MAIL
 
    

    
    

      
      
someone@example.com

    

    
  




.flip-cards {
 background: linear-gradient(to left, #2493b4 0%, #f4e19f 100%);
  width: 300px;
  height: 300px;
  padding: 5px;
  border-radius: 1rem; 
    position: relative;
  z-index: 1;
  margin: auto;
  perspective: 1000px;
}

.steilte {
     color: #2493b4;
  font-weight: bold;
  text-decoration: none;
  font-size: 30px;
}

.mailed {
    color: #2493b4;
    font-weight: bold;
}

.flip-card-fronts {
  background-color: #f4e19f;
display: flex;
  justify-content: center;
  align-items: center;
   position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  border-radius: .7rem;
}

.flip-card-backs {
     position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  border-radius: .7rem;
  background-color: #f4e19f;
  transform: rotateY(180deg);
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 20px;
}

.flip-card-inners {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
  box-shadow: 0 4px 8px 0 rgba(3,0,0,0.2);
}

.flip-cards:hover .flip-card-inners {
  transform: rotateY(180deg);
  transition: 2s;
}

.flip-card-inners::after {
 position: absolute;
 content: "";
 top: 30px;
 left: 0;
 right: 0;
 z-index: -1;
 height: 100%;
 width: 100%;
 transform: scale(0.88);
 filter: blur(25px);
 background: #2493b4;
 transition: opacity 0.5s;

I tried everything I previously read on stackoverflow and other places (regenerating css, clearing cache, etc). Also tried giving the two different sections, different ids and different classes.

html css elementor codepen