CSS Styling #111

Activity

1. bilalmohib commented on Nov 23, 2020

   

   bilalmohib

   on Nov 23, 2020

   Last edited by bilalmohib

   More actions

   CSS Styling not applying on Slider and children elements.

   Please help me I am having the same issuse.This all code is not working.Please tell me what to install on using the following css.Any help is very much appreciated.Thanks
   .slider {
   position: relative;
   width: 100%;
   height: 400px;
   overflow: hidden;

   & a {
   	&.previousButton, &.nextButton {
   		font-size: 22px;
   		line-height: 0;
   		display: block;
   		position: absolute;
   		top: 50%;
   		transform: translateY(-50%);
   		transition: all .3s linear;
   		z-index: 1;
   		color: #333;
   		padding: 10px;
   		text-decoration: none;
   		backface-visibility: hidden; /* prevent jump effect when scaling */
   
   		&:not(.disabled):hover {
   			transform: translateY(-50%) scale(1.25);
   			cursor: pointer;
   		}
   	}
   
   	&.previousButton {
   		left: 20px;
   	}
   
   	&.nextButton {
   		right: 20px;
   	}
   }
   

   }

   .slide {
   width: 100%;
   height: 100%;
   position: absolute;
   overflow: hidden;

   &.hidden {
   	visibility: hidden;
   }
   
   &.previous {
   	left: -100%;
   }
   
   &.current {
   	left: 0;
   }
   
   &.next {
   	left: 100%;
   }
   
   &.animateIn,
   &.animateOut {
   	transition: all 2s ease;
   }
   
   &.animateIn {
   	&.previous,
   	&.next {
   		left: 0;
   		visibility: visible;
   	}
   }
   
   &.animateOut {
   	&.previous {
   		left: 100%;
   	}
   
   	&.next {
   		left: -100%;
   	}
   }
   

   }
2. abhidadhaniya23 commented on Mar 3, 2022

   

   abhidadhaniya23

   on Mar 3, 2022

   More actions

   Just use your own style.css in your repository and use below code in your own file.

   .slide {
   width: 100%;
   height: 100% !important;
   position: absolute;
   overflow: hidden;

   You can solve your problems by using !important