Foundation CSS Help

[bondimedical]

How can I change the color of the text in just one of the headings in top-bar (currently #ffffff)?

[bsmither]

All the text in the Navigation headings has the CSS selector:

.top-bar-section ul li > a {

The difference among all of them is the name of the category. So, you need to find the specific name of the one category you want to have a different styling.

http://www.w3schools.com/css/css_attribute_selectors.asp

In the file cubecart.default.css, add:

.top-bar-section ul li > a[title="Test Category 3"] { color: green; }

There is also the color of the text when the mouse cursor is hovering over it:

.top-bar-section ul li:hover:not(.has-form) > a[title="Test Category 3"] { color: blue; }

[bondimedical]

Thank you for your help.

I have one other CSS issue. I am using the following code to have responsive YouTube videos.

.videoWrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
}
.videoWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

On Foundation however it looks a bit big because the video touches the left and right hand edges of the border. How can I put a space of 30px on the left and right hand sides?

[bsmither]

I think your class is actually .video-container (not .videoWrapper, unless you are working on a development installation).

The <iframe> seems to have fixed pixel height (315) and width (560) attributes. Once you remove those attributes, test the responsiveness.

But it is weird how the iframe gets sized. For the iframe rule, try width: 90% and add margin: 0 2% 0 30px;

[bondimedical]

I have removed the height and width attributes and changed the iframe rule however some issues came up.

The width of 90% is good however the 30px moves it over to the right too much on mobiles. How do I centre instead?

Also, black bars have appeared on the top and bottom of the YouTube video?

[bsmither]

Try changing the 30px to 5%.

I have no advice about the black bars. Does the imagery look to have a normal ratio? Not stretched?

[bondimedical]

Thanks it appears centered now.

The black bars appear because the width is set to 90% but the imagery is fine. They get even bigger if you lower it to say 80%?