JW Video Wall Stack - CSS to hide mobile navigation dots

[danhmill (Dan M)]

Hoping someone could help me with the css class/code to hide the navigation dots that appear in Joe’s Video Wall stack when in slider mode on mobile. See pic. Site link below.

http://1dev.gotopkick.com/_3curriculum/

[teefers (Doug Bennett)]

What do you consider “mobile”?
At about 1155px you goto a hamburger menu(Although you break with the second line at about 1312px). The standard mobile for foundation theme is 640px.
Try this for mobile menu size, you can change the 1155px to what you want.

@media only screen and (min-width: 1155px) {   
.slick-dots li button {
    display: none;
}
}

[danhmill (Dan M)]

Thanks for the attempt teefers. Doesn’t seem to do the trick however.

[robbeattie]

How about using the dreaded !important? Again, adjusting the width to your preference.

@media only screen and (min-width: 1155px) {   
.slick-dots li button {
    display: none !important;
}
}

[teefers (Doug Bennett)]

@teefers

.slick-dots li button {
display: none;
}

Didn’t try with the media querry but the above works fine.

[DLH (Don H)]

Shouldn’t that be “max-width”?

[danhmill (Dan M)]

@robbeattie

@media only screen and (min-width: 1155px) {
.slick-dots li button {
display: none !important;
}
}

Thanks all. Worth noting that Joe’s stack does not display the nav dots on non-mobile devices. While I understand break points etc., there are not break point settings in this particular stack specific to the nav dots…I get a bit out of my depth beyond that. All I know is that the nav dots display on my phone and not on my desktop browser. Any help on where to insert code in Rapidweaver? I’ve tried in the HTML code/CSS section of Rapidweaver with no luck.

[danhmill (Dan M)]

Thanks teefers…not working for me however? Any thoughts on what I might be missing? I’ve posted another bit of info above.

[klaatu]

@danhmill

That screenshot looks incorrect to me. Why is the first line of the CSS you have been provided missing? Re-check the snippet; where is the:

@media only screen and (min-width: 1155px)

part?

Take care to paste in the whole snippet to the CSS page level container If that does not work (I think it should) try this snippet which hides that entire class of li element.

@media only screen and (max-width: 1155px) {
	.slick-dots li {
		display: none !important;
	}
}

Again… recheck the snippet, then look at your screenshot… they are not the same, right?

Should look more like this:

[danhmill (Dan M)]

Thanks klatuu. I had tried the entire code as well. IMO I"m not sure the breakpoint code is needed, as I’m not trying to hide below/above a certain breakpoint. Just hide them in total. That said I tried strippingthe @media bit and just using the the “slick-dots” bit to see if that would work. No luck. Thanks though.

[teefers (Doug Bennett)]

On your screen shot you have curly brackets around the entire Rule.

.slick-dots li button {
display: none;
}

Copy and paste the above, replace what you have in the screen shot. Republish, clear your browsers cache.

[danhmill (Dan M)]

Thanks teefers (and zebee who I messaged). As I mentioned a bit out of my depth with CSS. Cleaned up the curly brackets and works perfectly. Thanks to all.