I am about to publish a site that you can see the test version of here: www.ianmusk.no/nsh On the home page there is the new 2.0 Nivo slider with the width set to 100%. Yes it scales on tablets and smartphones, but if you look at the horizontal scroll bar in any device or desktop screen you can see that the page with Nivo 2 on it is super wide. If you scroll to the far right you will see at the end there are the numbers 1, 2, 3 and 4. That is the number of slides in my Nivo. Nivo is only on the home page. The other pages have still images that fir ok. All the pages are goverened by the same template so it seems there is a major problem making Nivo responsive? Even if I set Nivo 2 to fixed width (860 in this case) it still makes no difference. So what is going on with Nivo 2? How do I fix it?

Update: Even though I like DMX better because they are easy to work with inside DW, I have had to replace Nivo on the above mentioned page with another slider in order to meet the approval deadline. However, the rogue page with Nivo can still be seen but at www.ianmusk.no/nsh/index2.html

Hello Ian,

I just tested the "minimal" skin that you are having the problem with. In order to fix the problem please:
- Open the Styles/nivoSlider/minimal/minimal.css
- Go to Line: 24 where the following rules are:

.theme-minimal .nivo-controlNav {
	position: absolute;
	left: 70px;
	right: 10px;
	top: 12px;
	padding: 0;
	text-align: right;
	z-index: 9;
}

.theme-minimal .nivo-controlNav a {
	display: inline-block;
	width: 16px;
	height: 16px;
	background: #fff;
	-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .65);
	box-shadow: 0 1px 1px rgba(0, 0, 0, .65);
	text-indent: 9999px;
	border: 0;
	margin: 0 2px;
}

- Replace those with:

.theme-minimal .nivo-controlNav {
	position: absolute;
	right: 10px;
	top: 12px;
	padding: 0;
	z-index: 9;
}

.theme-minimal .nivo-controlNav a {
	display: inline-block;
	width: 16px;
	height: 16px;
	background: #fff;
	-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .65);
	box-shadow: 0 1px 1px rgba(0, 0, 0, .65);
	text-indent: -9999px;
	border: 0;
	margin: 0 2px;
}

All should be fine now.

Yes that did it, thank you for your quick and precise response.

This reply was removed on 3/28/2022 12:14:37 PM.
See the changelog