Margin Difficulties with slider

Question

Whenever I place this slider somewhere on a website I am working on, it just overlaps everything. How could I get it to have margins set depending on it's size? That way it doesn't sit on top of everything, but instead things will just be moved out of it's way.

P.S Yes I know there are two of the same testimonials, I just wanted 5 for future reference so I duplicated one. :P

Here is a link to the codepen.

.test-slider {
  margin: 15% auto;
}
.test-slide {
  left: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
  min-width: 25%;
  max-width: 60%;
  animation: test-slider 100s infinite;
  -webkit-animation: test-slider 100s infinite;
  opacity: 0;
}
figure.test div {
  display: inline-block;
  vertical-align: middle;
  padding: 1em 1em 0em 1em;
  margin-bottom: 0.5em;
}
figure.test {
  padding: 1em;
  font-family: lato !important;
  overflow: hidden;
  color: #000000;
  font-size: 1em;
  background-color: #2d2d2d;
  background-image: linear-gradient(-25deg, rgba(0, 0, 0, 0.2) 0%, rgba(255, 255, 255, 0.1) 100%);
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border-radius: 0.3em 0.3em 0.3em 0.3em;
}
figure.test h2,
figure.test h4 {
  font-family: lato;
  text-transform: none;
  margin: 0;
}
figure.test h2 {
  font-weight: bold;
  color: white;
}
figure.test h4 {
  font-weight: normal;
  color: #a6a6a6;
}
figure.test img {
  margin-left: 1.5em;
  vertical-align: middle;
  width: 8em;
}
figure.test .img-circle {
  position: relative;
  overflow: hidden;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
}
figure.test .img-border {
  border: 0.5em solid tan;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  box-shadow: 0.4em 0.4em 2em rgba(0, 0, 0, 0.4);
}
figure.test p {
  color: black;
  font: lato;
  margin-left: 2em;
  margin-right: 2em;
  padding: 1em;
  opacity: 1;
  font-style: italic;
  font-size: 1em;
  background-color: white;
  border-radius: 0.3em 0.3em 0.3em 0.3em;
  box-shadow: inset -0.1em -0.1em 0.2em rgba(0, 0, 0, 0.3);
  text-align: left;
}
figure.test p {
  border: none;
  position: initial;
  content: " ";
  quotes: "\201C""\201D""\2018""\2019";
}
figure.test p:before {
  content: open-quote;
}
figure.test p:after {
  content: close-quote;
}
@keyframes test-slider {
  0% {
    opacity: 0;
  }
  4% {
    opacity: 1;
  }
  16% {
    opacity: 1;
  }
  20% {
    opacity: 0;
  }
}
div.test-slide:nth-child(0) {
  animation-delay: 0s;
  -webkit-animation-delay: 0s;
}
div.test-slide:nth-child(1) {
  animation-delay: 20s;
  -webkit-animation-delay: 20s;
}
div.test-slide:nth-child(2) {
  animation-delay: 40s;
  -webkit-animation-delay: 40s;
}
div.test-slide:nth-child(3) {
  animation-delay: 60s;
  -webkit-animation-delay: 60s;
}
div.test-slide:nth-child(4) {
  animation-delay: 80s;
  -webkit-animation-delay: 80s;
}


  
    
      
        
        
          John & Sara
          Couple
        
      
      John and I finally had a night to sit down and watch our video! Thank you so much for the absolutely amazing job you both did! We love the video and song choices! We are so happy you guys were able to work with us last min and do our wedding. There
        were so many things that you captured that we had forgotten already and we now have those memories to hold forever! This truly was the best day of our life, thank you for capturing it for us! It means the world!
      
    
  



  
    
      
      
        Crisbel & Daniel
        Couple
      
    
    Thank you for a job well done regarding the video. From the full video to the highlights and separating the performances. I love how you guys did it. It's really great! We'll definitely recommend your business. You guys exceeded our expectation. :)
    
  



  
    
      
      
        Kris & Annelise
        Couple
      
    
    Annelise and I love our video. It captured all the highlights, the music was a great choice, and it made us both laugh and cry. Thank you for all the hard work and effort you both put in to making the video.
    
  



  
    
      
      
        Kris & Annelise
        Couple
      
    
    Annelise and I love our video. It captured all the highlights, the music was a great choice, and it made us both laugh and cry. Thank you for all the hard work and effort you both put in to making the video.
    
  



  
    
      
      
        Jahmeil & Angel
        Couple
      
    
    Thank you so much Michael and Dora, it was absolutely beautiful! We loved every minute of it. You did a great job interviewing and editing the video to show the highlights of our special day. We have already watched it twice lol the length and content
      are absolutely perfect!

Paulius K. · Accepted Answer

If I understand correctly, you need to use z-index: -1 for that. Also, you need to put it in a div and set margins directly to it.

If that doesn't help, post the website link or update CodePen code to see exactly what's wrong.

UPDATE:

This may be a temporary solution, but it's still better than nothing.

You need to:

add position: relative to .fl-html div, which contains slider divs.
change max-width to 100% or remove it from .test-slide div
change width to 100% in .test-slide div.

Then, you need to use media queries to add margins to your slider, to prevent slider from overlapping a video.

Add styles for mobile, small and medium screens, that it will look nice.

Also, I'd like to mention that there's way too many divs. If you're using WordPress, then it's.. meh.. It can be better, but if you're building a website and NOT using WordPress or any other CMS, then my tip would be to re-code whole website and it will be way easier to maintain.

Good luck.

Margin Difficulties with slider

Answers (1)

Related Questions