0
Good morning,
I’m having a problem where I’m trying to reference a link in a Carousel here, however it is in trouble. Below the image as the site is.
Below picture how it looks when I put the link referenced in the nav.
The template I based on for building it is this: https://www.myresponsee.com/onepage/
I’m studying Front-End now and it was all going right up there. haha
Header code that presents problem. I was able to notice that it cannot activate the . Owl-Carousel.Owl-Loaded { display: block; } when I link.
Carousel CSS code
#carousel .text {
position: absolute;
top: 40%;
z-index: 10;
}
#carousel .text h2 {
background: transparent;
color: #fff;
display: inline-block;
font-size: 4em;
font-weight: 300;
margin: 1px 0;
max-width: 600px;
padding: 10px 20px;
width: 100%;
}
#carousel .text p {
background: transparent;
color: #fff;
max-width: 600px;
padding: 10px 20px;
width: 100%;
}
#carousel .owl-dots {
background: transparent;
bottom: 0;
margin: 0;
padding: 0.625em 0;
position: absolute;
width: 100%;
}
.owl-carousel.owl-theme .owl-dot span {
background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
border: 3px solid rgba(0, 40, 58, 0.57);
height: 18px;
margin: 0 0.3125em;
opacity: 1;
width: 18px;
}
.owl-carousel.owl-theme .owl-dot.active span, .owl-carousel.owl-theme .owl-dot:hover span {
background: none repeat scroll 0 0 #007f7f;
}
Pedro if possible also put the HTML code as it appears in the browser. I say this because sometimes the structure of HTML tags and CSS may not be matching.
– hugocsl
Opa está assim https://jsfiddle.net/f0yf1cws/, não uei o css nem js ai, mas a estrutura HTML é esse. I left the Index-en.html there in the Business online, but I put external link, the problem.
– Pedro Galocha
Pedro I won’t be able to answer you because I would have to see the CSS of Owl etc. But what I can tell you is that if you have a rule that is like this:
.owl-carousel.owl-theme .owl-dot spanyou go and put a "to" in the middle like this:.owl-carousel.owl-theme .owl-dot a spannote that now you have an A before span, this makes the rule break I understand. I believe you should have a CSS that says for example.owl imgand when you put.owl a imgCSS breaks understand. I think this should be the problems, but I’m not sure.– hugocsl
Opa Hugo, so I don’t have any breaks in this style https://jsfiddle.net/f0yf1cws/7/ The CSS is this, but it doesn’t have one that breaks the rule.
– Pedro Galocha
So make the rule you rss, like
.owl a img {display:block !important;}for example. Add the class that got lost with Important.– hugocsl
And I tried to do this, I even set up Owl-load in Div’s Class to test. But then he pushes everything and loads one image under the other.
– Pedro Galocha
Just to update, the JS responsible for loading caroseul is https://jsfiddle.net/f0yf1cws/11/ but I could not identify pq he of the problem and do not load ai with external link.
– Pedro Galocha