I'm using the Wordpress theme Phoenix for my portfolio but i'm having an issue with the portfolio section. Each project is open in an overlay and i can't seem to find the reason why there is no link on the cross made to close it.
https://maurugeonyannick.com/Portfolio_V2/
You are using z-indexes and that's messing up some of your layering.
I would place a z-index of 10 to your .overlaytop class. That will fix your issue.
As it currently stands, your .overlaytop element is buried underneath your .container element having a z-index of 2, then within your .container you have your main heading with a z-index of 3, etc.
Using chrome's dev tools, adding the z-index of 10 to
<div class="col-md-12 overlaytop" />
addressed the issue.
Thank you!
I had a negative margin on the overlaytop class aswell. I knew it was something like this but i couldn't find the issue :)
.overlay .overlaytop {/*margin-bottom:-30px*/ z-index:10;}
Solved my issue.
You're the best!
Related
I've found some problems similar to mine, but nothing close enough for me
I've built a blog-site using NuxtJs with Vuetify and have deployed it on Netlify. The site looks and works great for the most part. My site has a navigation drawer that is supposed to have a background-color of #659dbd. This color shows up in development. However, on the deployed site, the background-color is white. When I inspect the site in my dev tools, this color does show up in the styles, but it has a line through it, like this:
Does anyone have any idea what could be causing this?
I've looked at the Netlify gotchas, but couldn't anything regarding anything like this.
It's strange because all of my other stylings render fine.
If I've left anything out or if you need to see any code, let me know.
This happens because you probably using nuxt/vuetify module, and for development it use builded vuetify bundle, but for production it use treeshake version. And with treeshaken version of vuetify it do load css dynamically on page. So first loaded your page style, adn then vuetify load its own component styles and it overrides your own styles
There's probably some other more specific rule.
<div class="list">
<div class="drawer"> Item </div>
</div>
<style>
.list {
background-color: #4589e0;
}
.drawer {
background-color: #1707a3;
}
.list .drawer {
background-color: #a3073b;
}
</style>
Read more about it here: https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
I have had a small site built for me which has an issue. The slideshow images in it can not be downloaded by right-clicking on them. I believe it's because they are contained in the DIV background.
I'm not a developer, I'm just trying to troubleshoot this myself and learn. This is an example of the code:
<div class="swiper-slide c-swiper__slide" data-module="ResponsiveBackgroundImage" data-swiper-slide-index="6" style="width: 1431px; transform: translate3d(-10017px, 0px, 0px); opacity: 0; transition-duration: 0ms; background-image: url(thisistheimageIneedtoclick.jpg);">
If anyone knows if there is some CSS or some other method I can try to enable right-clicking I would be grateful.
I've got a silly problem. It's probably just down to me not being able to see the wood for the trees... one of you geniuses might spot the problem immediately, or at least I hope so!
I've developed a theme for a Magento site using Bootstrap. First I built static HTML templates, which were tested for responsiveness, and they all worked fine.
I then integrated those templates into Magento... and the responsive elements stopped working. They were working initially, but at some point during the site development, they stopped working.
I've looked and looked at it and I can't see what's wrong. I presume there's some sort of conflict with Bootstrap somewhere but I just can't see it. There are no script errors that I can see and everything is loading correctly, but the responsive elements refuse to work.
Can someone take a look at the site at http://www.collaredclergywear.co.uk/ and tell me what I'm missing? I think it's probably something simple but I can't see the wood for the trees anymore.
Cheers,
Willo
One thing in style.css try commenting it. better remove style.css completely and test
.wrapper {
min-width: 954px;
}
I am creating a Wordpress theme with Bootstrap 3.
I add html5shiv.js and respond.min.js in head and, now, the theme works in IE8.
When I open the website, for a second and only in IE8, the layout isn't correct and then is perfect.
What is the best practice to fix this initial visualisation problem?
Stop using Ie8, it is dead ....
I solve with a css "respond-fix.css" inside conditional comment with this css code:
body{visibility:hidden} #media screen and (min-width:1px){body{visibility:visible}}
I just implemented Google recaptcha on a site and it appears to be having a weird graphic glitch under the box itself.
You can see a picture here:
As you can see, under the captcha there's some glichy looking lines. Does anyone know a way to get rid of this and or if it's supposed to be there? (I don't think so, but the implementation code is taken directly from google themselves).
I had the same problem and figured out that the line height of 20px that I set for the body tag in my CSS file was the culprit. Try this, it worked for me:
.recaptchatable * {
line-height: 4px;
}
For me, I had to choose a THEME in the implementation of the recaptcha instance on a form building widget for wordpress. It was not indicating ANY theme when it was displaying weird. I seleceted "clean" and it works nice.
Example