http://www.imageworkshop.com/2014/03/03/miranda-revisited-portrait-of-anne-louise-lambert-at-hanging-rock/
When an image is clicked it launches in the Nivo lightbox. This was working perfectly until recently. an image will be centered and resize responsively to remain centered. (you can see an example of it working correctly here: http://www.sandbox.sharonblance.com/project/melbourne-town/)
Suddenly this doesn't seem to be working properly anymore. I have recently upgraded from v1.0 to v1.2 of the .js library for the lightbox, however, rolling this back does not fix the issue - so it must be related to some other CSS or theme change somewhere that is affecting the lightbox?
I am also seeing scrollbars showing up when the screen is resized small which is not correct.
I noticed that hiding the following rule seemed to influence the left/right alignment, however I cannot find a way to fix all the issues I am seeing:
.nivo-lightbox-effect-slideLeft.nivo-lightbox-open .nivo-lightbox-wrap,
.nivo-lightbox-effect-slideRight.nivo-lightbox-open .nivo-lightbox-wrap {
transform: translateX(0px);
}
from the nivo-lightbox.css
I added/changed (gave it a fixed width) it to this
.nivo-lightbox-content {
margin-left:auto;
margin-right:auto;
width: 800px;
height: 100%;
}
Related
Having a hard time figuring out why my website scrolls way left in the mobile version!
I have checked all of my widths and even tried some suggestion on here but the site still scrolls to the right of the screen! Made sure common viewport code is in the head tag but to no avail. This is a WordPress site based on the twentysixteen theme
There should be no scrolling left or right on the mobile version of my site.
I've been debugging other css issues and this problem is becoming a major headache. Any clue as to what may be causing this width issue with the mobile css?
https://phoenixim.com/liveinhomecare/
CSS Style Sheet
https://phoenixim.com/liveinhomecare/wp-content/themes/twentysixteen/style.css?ver=5.2.2
Your problem comes from:
.banner {
margin: 0 -600rem;
padding: 0.25rem 600rem;
}
This code tries to break out of the container using the negative margin/padding trick. To fix this, try:
#main {
overflow: hidden;
}
I've found great advice by #Bojan Petkovski how to make a bxslider full screen:
Making BXslider full screen (filling entire browser window)
But I've encountered a problem running bxslider with parallax effect and few JS scripts (enquire, skollr). I think that they produce the problem. But I could be wrong.
Here is the website: http://tedxmru.com/
Once the browser's window is resized to it's smallest(making it narrow) width the slides doesn't resize proportionally.
As I've tested and if I'm not wrong this rule isn't working on resize:
.bxslider, .bxslider li{
height: 100% !important;;
}
Second problem once the window is narrowed and I hit refresh - the slider disappears, while I haven't written any media queries to hide it.
Need help fixing it with resize issues
Try this:
.bxslider, .bxslider li{
height: 100vh !important;
}
I tried it using developer tools on your site and it appears to be working. At least for resizing the slides.
I have a problem with this site: www.manniche.com.
In the slider, when you hover over it, some arrows appears so you can skip to the next slide. In Safari on OS X Yosemite, the arrows appears on top of the fixed menu, if you have scrolled down a bit, and this doesn't look great. It works fine in Chrome and Firefox.
The arrows have a z-index of 100, while the header have a z-index of 200.
Is this a general Safari issue, or can I somehow overrule it, so the arrows does not apper on top of the menu, but still on top of the slider?
I am using the Revolution Slider Plugin and Wordpress, for the site.
I had the same issue and had to add the styling in manually. My arrows were 80px high so it was:
#slider-wrapper { position: relative; }
.tp-rightarrow,
.tp-leftarrow {
top: 50% !important;
margin-top: -40px !important;
}
That did the trick nicely.
You should update to the latest version of the slider. z-index and also transform z issues are solved in the current version. Just rechecked and in 4.6.4 there are no issues like that any more.
Also it is a good idea to contact ThemePunch by following the link http://themepunch.com/support-center where you get a direct answer within a day !
I've just noticed a weird bug with Firefox (it works fine with IE and Chrome, all 3 of them at latest version). The brand image is not clickable when the screen is large and the navbar is fully expanded (I can see a few pixels to the left where the click appears, but clicking the image does nothing). But if you resize your screen to have a small width, the navbar collapses and then the link is clickable.
I'm using Bootstrap v3.0.0 for the navbar.
Any ideas? An issue with the padding, or fixed positioning? I couldn't find anything closely similar on the Internet.
Weird issue.
Overriding the bootstrap3 rule of .navbar-header { float: left; } seems to do the trick:
.navbar-header {
float: none;
}
I am working on a site. The problem page in question is here:
http://bit.ly/I4YR2T
Currently I have the images in a table. I am also using Shadowbox for these images.
When I minimize the browser window in Chrome and Safari, the images scale down nicely.
However, the images are not scaling down nicely when I minimize the window in Firefox.
This page has the most images and is the most troubling, though I notice that the site as a whole does not scale down as nicely in Firefox as it does in Chrome & Safari. I have not yet checked IE.
I know this must be due to some shoddy CSS on my part.
Can anyone guide me on how to resolve this problem?
Thank you so much!
see this answer "Max-width does not apply to inline elements so you will get inconsistent behaviour cross browser...you may achieve it if you set div img { display:block } and then align the img... tags with floats instead of standard inline." That probably means getting rid of your table or setting the table cells to display as block.
Had same problem with Firefox. I got it to work in Chrome but Firefox wouldn’t display the code. So here is what I did:
/* begin HeaderObject */
.banner-img {
display: block;
margin: 0 auto;
max-width: 99%;
left: 50%;
}
/* end HeaderObject */
I changed the max-width to 99% and it displayed correctly and resized correctly. The header object was placed inside the header on the CSS, so by chance I tested to see if I could get it to work with a smaller width, as it was “nested” inside the header. Then I added the left: 50%; code because I wanted my image to display centered. Working great now.