FlexSlider Arrows working but not visible - flexslider

I tried following advice about this issue from other chat rooms but with no luck. I am using Unbounce and I copied all codes from one old landing page to a new one. Everything works except the arrows are not visible (yet they are clickable, they work).
All I managed to do so far was removing the frame around the arrows.
Any idea what could be wrong?
Link to the new LP
Link to the old LP with working Flexslider
<style>
a {
text-decoration: none !important;
}
/*Testimonials slider*/
.testimonial-container {
background-color: transparent;
width: 100%;
}
.cd-testimonials-wrapper {
position: relative;
width: 100%;
max-width: 100%;
margin: 0 auto;
background-color: transparent;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
padding: 25px 0px 40px 0;
z-index: 1;
}
.testimonial-content {
max-width: 1000px;
width: 80%;
margin: 0 auto 30px auto;
}
.cd-testimonials {
color: rgba(130, 132, 139, 1);
text-align: center;
list-style: none;
padding: 0;
margin: 0;
}
.cd-testimonials > li {
position: absolute;
opacity: 0;
font-family: 'Fira Sans', sans-serif;
}
.cd-testimonials > li:first-child {
position: relative;
opacity: 1;
}
.testimonial-content p {
font-style: italic;
line-height: 1.4;
margin-bottom: 30px;
padding: 0 14px;
font-size: 19px;
color: #284A6A;
}
.cd-author .cd-author-info {
display: inline-block;
vertical-align: top;
color: #0058A9;
font-size: 16px;
font-weight: 500;
text-align: center;
line-height: 1
}
ul.cd-author-info {
list-style: none;
}
ul.cd-author-info li span {
font-size: 14px;
line-height: 32px;
font-style: italic;
font-weight: 300;
color: #9c9c9c;
}
.flex-direction-nav a {
text-decoration: none;
display: block;
width: 50px;
height: 100%;
margin: 0px 0 0;
position: absolute;
z-index: 9999;
top: 0;
opacity: 1;
background: transparent;
cursor: default;
color: transparent;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.flex-direction-nav a:before {
font-size: 52px;
font-family: Arial;
content: "\f053";
position: absolute;
display: block;
top: 50%;
cursor: pointer;
color: transparent;
padding: 14px 10px 14px 10px;
}
.flex-direction-nav a.flex-next:before {
content: "\f054";
padding: 14px 20px 14px 10px;
}
.flex-direction-nav .flex-prev {
left: 0px;
}
.flex-direction-nav .flex-next {
right: 0px;
text-align: right;
}
.flexslider:hover .flex-direction-nav .flex-prev {
opacity: 1;
left: 0px;
}
.flexslider:hover .flex-direction-nav .flex-prev:hover {
opacity: 1;
}
.flexslider:hover .flex-direction-nav .flex-next {
opacity: 1;
right: 0px;
}
.flexslider:hover .flex-direction-nav .flex-next:hover {
opacity: 1;
}
.flex-direction-nav .flex-disabled {
opacity: 0!important;
filter: alpha(opacity=0);
cursor: default;
}
.flex-control-paging li a {
width: 6px;
height: 6px;
display: block;
background: #666;
background: rgba(0, 0, 0, 0.4);
cursor: pointer;
text-indent: -9999px;
-webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
-moz-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
-o-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
}
.flex-control-paging li a:hover {
background: #333;
background: rgba(0, 0, 0, 0.7);
}
.flex-control-paging li a.flex-active {
background: #000;
background: rgba(2, 23, 31, 1);
cursor: default;
}
.flex-control-nav {
bottom: 30px;
position: absolute;
margin: 0 auto;
padding: 0;
text-align: center;
width: 100%;
}
.flex-control-nav li {
display: inline-block;
padding: 0px 5px 0px 5px;
}
/*Footer icons custom style*/
.footer-icons {
text-align: left;
}
.footer-icons a {
margin-right: 10px;
color: #fff;
}
#media screen and (max-width: 767px) {
.cd-author .cd-author-info {
line-height: 1.4;
}
.cd-author .cd-author-info {
font-size: 16px;
}
.testimonial-content p {
font-size: 16px;
}
.flex-direction-nav a {
width: 30px;
}
.flex-direction-nav a:before {
font-size: 30px;
}
.flex-direction-nav a:before {
padding: 14px 0px 10px 0px;
}
.flex-direction-nav .flex-prev {
left: 0px;
}
.flex-direction-nav .flex-next {
right: 0px;
text-align: right;
}
.flexslider:hover .flex-direction-nav .flex-prev {
opacity: 1;
left: 0px;
}
.flexslider:hover .flex-direction-nav .flex-prev:hover {
opacity: 1;
}
.flexslider:hover .flex-direction-nav .flex-next {
opacity: 1;
right: 0px;
}
}
</style>

You lose Font Awesome css, which is required as the nav arrow.
add
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
to <head> section. (Just as the working page does, check it's source code line 2825). Good luck.

Related

Can't make CSS Animations work with #keyframes and position relative/absolute

I am trying to practice simple CSS Animations with Keyframes.
I am trying to move the square from left to right, however, this does not seem to be working with position relative/absolute. I works when I do transform: translateX(...) or something similar, but not with the aforementioned method. Any ideas why?
CSS Code:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: rgb(70, 70, 162);
}
.box1 {
height: 600px;
width: 80%;
background-color: white;
margin: 50px auto;
border: 5px solid black;
position: relative;
}
.square1 {
height: 100px;
width: 100px;
background-color: red;
position: absolute;
top: 0px;
left: 0px;
animation-name: left-right;
animation-duration: 3s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-direction: alternate;
}
#keyframes left-right {
0% {
top: 0px;
left: 0px;
}
100% {
top: 0px;
right: 0px;
}
}
So, in the Keyframes you had right
100% {
top: 0px;
right: 500px;}
where as it needed to be left
100% {
top: 0px;
left: 500px;}
full code:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: rgb(70, 70, 162);
}
.box1 {
height: 600px;
width: 80%;
background-color: white;
margin: 50px auto;
border: 5px solid black;
position: reletive;
}
.square1 {
height: 100px;
width: 100px;
background-color: red;
position: absolute;
top: 0px;
left: 0px;
animation-name: left-right;
animation-duration: 3s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-direction: alternate;
}
#keyframes left-right {
0% {
top: 0px;
left: 0px;
}
100% {
top: 0px;
left: 500px;
/*here*/
}
}

datepicker last day of the month styling

So basically I've done my best to style the datepicker for my project.
My last hurdle is to style the last days of the month if they're in range of the selection to be all curvy like all the other days at the start and end of a week.
Can anyone please help with this problem? Any sort of help is highly appreciated thank you.
This is my stylesheet.
.wpm-datepicker {
font-weight: 600;
box-shadow: none;
background-color: transparent;
font-family: "Inter", sans-serif;
width: 100%;
.bs-datepicker-multiple {
margin: 0 0 10px;
border-radius: 8px;
box-shadow: $color-light-blue-grey 0 6px 13px;
flex-basis: 50%;
&:first-of-type {
margin-right: 20px;
}
&:nth-of-type(2) {
margin-left: 20px;
}
}
.bs-datepicker-container {
padding: 0;
width: 100%;
}
.bs-datepicker-head {
background-color: #0f2332 !important;
border-radius: 8px 8px 0 0;
padding: 17px 10px;
height: auto;
&::after {
content: unset;
}
button:nth-of-type(1) span,
button:nth-of-type(4) span {
color: transparent;
left: -12px;
top: 10.5px;
display: inline-block;
border-right: 2px solid #ffffff;
border-bottom: 2px solid #ffffff;
width: 10px;
height: 10px;
border-radius: 1px;
}
button:nth-of-type(1) span {
transform: rotate(135deg);
}
button:nth-of-type(4) span {
transform: rotate(-45deg);
}
}
.bs-datepicker-body {
border-radius: 0 0 8px 8px;
border: 0.1px solid #e5e5e5;
padding: 19px;
table th {
color: #970202 !important;
font-weight: 600;
text-transform: uppercase;
padding: 14px 0;
}
table th:first-of-type,
table td:first-of-type {
display: none;
}
table td {
color: #0f2332 !important;
}
table td span .is-other-month {
color: #aab9c3 !important;
}
table.days span {
line-height: 31px;
font-size: 14px;
}
table.days span.in-range:not(.select-start)::before {
background: #ffcaca !important;
right: 19px;
height: 24px;
top: 4px;
}
table td::before,
table td span::before {
left: -20px !important;
}
table td span.selected,
table td.selected span,
table td span[class*="select-"]::after,
table td[class*="select-"] span::after,
table td.is-highlighted:not(.disabled):not(.selected) span,
table td span.is-highlighted:not(.disabled):not(.selected) {
background-color: #ffcaca;
width: 24px;
height: 24px;
line-height: 24px;
}
table td span.is-other-month,
table td.is-other-month span {
background-color: transparent !important;
}
table td span.selected,
table td.selected span,
table td span[class*="select-"]::after,
table td[class*="select-"] span::after {
background: #e60000 !important;
}
table td:nth-of-type(2) span::before {
border-radius: 16px 0 0 16px;
left: 8px !important;
}
table td:nth-of-type(8) span::before {
border-radius: 0 16px 16px 0;
right: 4px !important;
}
table td:nth-of-type(8) span.select-end::before {
right: 10px !important;
}
table.days span.in-range.select-end::before {
right: 20px;
}
}
bs-days-calendar-view {
&:nth-of-type(1) bs-datepicker-navigation-view {
display: flex;
button {
padding: 0 4px;
font-size: 14px;
&:nth-of-type(1) {
padding-left: 24px;
padding-right: 10px;
}
&:nth-of-type(1) span {
bottom: 2px;
}
&:nth-of-type(3) {
padding: 0;
}
}
}
&:nth-of-type(2) bs-datepicker-navigation-view {
display: flex;
justify-content: flex-end;
button {
padding: 0 4px;
font-size: 14px;
&:nth-of-type(3) {
padding: 0;
}
&:nth-of-type(4) {
padding-left: 30px;
padding-right: 10px;
}
&:nth-of-type(4) span {
bottom: 2px;
}
}
}
}
}
My component has this for the bsConfig
this.bsConfig = {
containerClass: "wpm-datepicker",
};
And this how I have it for my markup.
<bs-daterangepicker-inline
[bsConfig]="bsConfig"
[bsValue]="bsRangeValue"
></bs-daterangepicker-inline>

Change pseudo element color on selected state

I want to change arrow color as well as circle when click on it. I am using LESS and getting right place to add border-top-color: #0066ff; Can anyone suggest please? Here is code:
LESS:
.circle {
border-radius: 50%;
box-sizing: border-box;
width: 225px;
height:225px;
border: 6px solid #ff6600;
border-radius: 50%;
position: relative;
cursor:pointer;
&.selected {
border: 6px solid #0066ff;
}
&:after {
top: 104%;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(136, 183, 213, 0);
border-top-color: #ff6600;
border-width: 10px;
margin-left: -10px;
transform: scaleY(1.6);
&.selected {
border-top-color: #0066ff;
}
}
}
HTML:
<div class="circle"></div>
JS:
$(document).ready(function(){
$('.circle').on('click', function(){
$(this).addClass('selected');
});
});
JS fiddle is here:
https://jsfiddle.net/kunjsharma/6eu431hp/1/
You need to put :after inside .selected: see this fiddle
.circle {
border-radius: 50%;
box-sizing: border-box;
width: 225px;
height:225px;
border: 6px solid #ff6600;
border-radius: 50%;
position: relative;
cursor:pointer;
&.selected {
border: 6px solid #0066ff;
&:after { // <-- moved this inside .selected
border-top-color: #0066ff;
}
}
// rest of the styles...
}

Bootstrap Lighbox - how to add caption with link?

I would like some of my Lightbox gallery images to have a caption with a link to another website. And if the caption link can open up in a new window/tab like the target="_blank" style. But I have no idea how to do this. Could I have some help please? Thanks in advance :)
Code for one gallery image:
<li class="col-xs-6 col-sm-6 col-md-3 col-lg-3 bottom-space">
<a href="img/photos/gallery/gallery_photo044.jpg" data-lightbox="tristone" data-title="My caption goes here">
<img class="img-responsive" src="img/photos/gallery-thumbs/gallery-thumbs044.jpg">
</a>
</li>
I have read somewhere I could use data attributes, so I tried data-href:
<li class="col-xs-6 col-sm-6 col-md-3 col-lg-3 bottom-space">
<a href="img/photos/gallery/gallery_photo044.jpg" data-lightbox="tristone" data-title="My caption goes here" data-href="http://mylinkgoeshere">
<img class="img-responsive" src="img/photos/gallery-thumbs/gallery-thumbs044.jpg">
</a>
</li>
But of course that didn't work since I don't really know what data-href does so I was just guessing :( I did look up about it but I guess my coding level isn't good enough so I don't understand it ^^;
Lightbox.css:
/* Preload images */
body:after {
content: url(../img/close.png) url(../img/loading.gif) url(../img/prev.png) url(../img/next.png);
display: none;
}
.lightboxOverlay {
position: absolute;
top: 0;
left: 0;
z-index: 9999;
background-color: black;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
opacity: 0.8;
display: none;
}
.lightbox {
position: absolute;
left: 0;
width: 100%;
z-index: 10000;
text-align: center;
line-height: 0;
font-weight: normal;
}
.lightbox .lb-image {
display: block;
height: auto;
max-width: inherit;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;
}
.lightbox a img {
border: none;
}
.lb-outerContainer {
position: relative;
background-color: white;
*zoom: 1;
width: 250px;
height: 250px;
margin: 0 auto;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
-o-border-radius: 4px;
border-radius: 4px;
}
.lb-outerContainer:after {
content: "";
display: table;
clear: both;
}
.lb-container {
padding: 4px;
}
.lb-loader {
position: absolute;
top: 43%;
left: 0;
height: 25%;
width: 100%;
text-align: center;
line-height: 0;
}
.lb-cancel {
display: block;
width: 32px;
height: 32px;
margin: 0 auto;
background: url(../img/loading.gif) no-repeat;
}
.lb-nav {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 10;
}
.lb-container > .nav {
left: 0;
}
.lb-nav a {
outline: none;
background-image: url('data:image/gif;base64,R0lGODlhAQABAPAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==');
}
.lb-prev, .lb-next {
height: 100%;
cursor: pointer;
display: block;
}
.lb-nav a.lb-prev {
width: 34%;
left: 0;
float: left;
background: url(../img/prev.png) left 48% no-repeat;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0;
-webkit-transition: opacity 0.6s;
-moz-transition: opacity 0.6s;
-o-transition: opacity 0.6s;
transition: opacity 0.6s;
}
.lb-nav a.lb-prev:hover {
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
opacity: 1;
}
.lb-nav a.lb-next {
width: 64%;
right: 0;
float: right;
background: url(../img/next.png) right 48% no-repeat;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0;
-webkit-transition: opacity 0.6s;
-moz-transition: opacity 0.6s;
-o-transition: opacity 0.6s;
transition: opacity 0.6s;
}
.lb-nav a.lb-next:hover {
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
opacity: 1;
}
.lb-dataContainer {
margin: 0 auto;
padding-top: 5px;
*zoom: 1;
width: 100%;
-moz-border-radius-bottomleft: 4px;
-webkit-border-bottom-left-radius: 4px;
border-bottom-left-radius: 4px;
-moz-border-radius-bottomright: 4px;
-webkit-border-bottom-right-radius: 4px;
border-bottom-right-radius: 4px;
}
.lb-dataContainer:after {
content: "";
display: table;
clear: both;
}
.lb-data {
padding: 0 4px;
color: #ccc;
}
.lb-data .lb-details {
width: 85%;
float: left;
text-align: left;
line-height: 1.1em;
}
.lb-data .lb-caption {
font-size: 13px;
font-weight: bold;
line-height: 1em;
}
.lb-data .lb-number {
display: block;
clear: left;
padding-bottom: 1em;
font-size: 12px;
color: #999999;
}
.lb-data .lb-close {
display: block;
float: right;
width: 30px;
height: 30px;
background: url(../img/close.png) top right no-repeat;
text-align: right;
outline: none;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
opacity: 0.7;
-webkit-transition: opacity 0.2s;
-moz-transition: opacity 0.2s;
-o-transition: opacity 0.2s;
transition: opacity 0.2s;
}
.lb-data .lb-close:hover {
cursor: pointer;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
opacity: 1;
}

IE 10 vertically stretching images?

heres the code. it seems to be working on this editor on stackoverflow...but when rendered on ie10 it take the palceholder image and stretches it (almost as if it were 200% in height and 100% in width
<style>
section`enter code here` {
padding: 1em;
text-align: center;
}
.content {
margin: 0 auto;
max-width: 1000px;
}
.content > h2 {
clear: both;
margin: 0;
padding: 4em 1% 0;
color: #484B54;
font-weight: 800;
font-size: 1.5em;
}
.content > h2:first-child {
padding-top: 0em;
}
.grid {
position: relative;
margin: 0 auto;
padding: 1em 0 4em;
max-width: 1100px;
list-style: none;
text-align: center;
}
/* Common style */
.grid figure {
position: relative;
float: left;
overflow: hidden;
margin: 10px 1%;
min-width: 310px;
max-width: 310px;
max-height: 310px;
width: 48%;
background: #d30c55;
text-align: center;
}
.grid figure img {
position: relative;
display: block;
height: 100%;
width:auto;
max-height: 100%;
max-width: 100%;
opacity: 1;
}
.grid figure figcaption {
padding: 0em 2em 2em 2em;
color: #ffffff;
text-transform: uppercase;
font-size: 1.25em;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.grid figure figcaption::before,
.grid figure figcaption::after {
pointer-events: none;
}
.grid figure figcaption,
.grid figure figcaption > a {
position:absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/* Anchor will cover the whole item by default */
/* For some effects it will show as a button */
.grid figure figcaption > a {
z-index: 1000;
text-indent: 200%;
white-space: nowrap;
font-size: 0;
opacity: 0;
}
.grid figure h2 {
word-spacing: -0.15em;
font-weight: 200;
}
.grid figure h2 span {
font-weight: 400;
}
.grid figure h2,
.grid figure p {
margin: 0;
}
.grid figure p {
letter-spacing: 1px;
font-size: 68.5%;
}
/*---------------*/
/***** transition *****/
/*---------------*/
figure.effect-transition {
background-color: #a39d99;
}
figure.effect-transition img {
/* opacity: 0.7; */
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: scale(1);
transform: scale(1);
}
figure.effect-transition:hover img {
opacity: 0.1;
-webkit-transform: scale(1);
transform: scale(1);
}
figure.effect-transition h2 {
margin-top: 80%;
-webkit-transition: -webkit-transform 0.35s;
transition: transform 0.35s;
-webkit-transform: translate3d(0,20px,0);
transform: translate3d(0,20px,0);
}
figure.effect-transition p {
margin: 1em 0 0;
padding: 0.6em;
border: 1px solid #fff;
opacity: 0;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: translate3d(0,20px,0) scale(1.1);
transform: translate3d(0,20px,0) scale(1.1);
}
figure.effect-transition:hover h2 {
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,-170px,0);
}
figure.effect-transition:hover p {
opacity: 1;
-webkit-transform: translate3d(0,0,0) scale(1);
transform: translate3d(0,-30px,0) scale(1);
}
#media screen and (max-width: 50em) {
.content {
padding: 0 10px;
text-align: center;
}
.grid figure {
display: inline-block;
float: none;
margin: 10px auto;
width: 100%;
}
}
</style>
<div class="container">
<div class="content">
<div class="grid">
<figure class="effect-transition" style="background-color: #d40e8c;"><img alt="blabla" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=310%C3%97310&w=310&h=310" /> <figcaption>
<h2>Go back <span>home</span></h2>
<p>Some random text here</p>
View more</figcaption></figure>
</div>
</div>
</div>
(I do not have the code on me at this exact moment to show).
I've built something with HTML5 and CSS3. Everything works wonderfully except on some peoples computers (everyone has IE10), the image files are being stretched vertically ?
This is being built for my company (internal)...Is there a reason why this would happen on only some peoples version of IE10?
Thank you,
Nick
Please Check with the css as shown below,
img.someClass{
max-width:100%;
width:auto
}
What did the trick for me was setting a max-width at something like
max-width: 110px;
and afterwards a width:100%;
images were nog not stretched anymore
UPDATE: nvm, this caused the img to have a width of 0 on Firefox