[James]

Hi

I want to make the banner and the menu the same width as the content boxes below it.

Is there any way of doing this with configuration, or does anyone know where within the CSS code I need to update to make them narrower.

I thought disabling responsive might do this, but it did not.

The website is: http://www.watfordfencingclub.co.uk

Suggestions welcomed.

Thanks

James

[Sakin]

@James: You can try adding in the following CSS in “Appearance => Theme Options => Custom CSS” box.

#header-image,
#header-menu {
	margin: 0 auto;
	width: 1190px;
}

@media screen and (max-width: 1224px) {
	#header-image,
	#header-menu {
		width: 1024px;
	}
}
@media screen and (max-width: 1060px) {		
	#header-image,
	#header-menu {
		width: 900px;
	}
}
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
	#header-image,
	#header-menu {
		width: 960px;
	}
}
@media screen and (max-width: 960px) {	
	#header-image,
	#header-menu {
		width: 700px;
	}
}
@media screen and (max-width: 767px) {
	#header-image,
	#header-menu {
		width: 380px;
	}	
}
@media only screen 
and (min-width: 480px) 
and (max-width: 767px) {
	#header-image,
	#header-menu {
		width: 440px;
	}
}
@media screen and (max-width: 479px) {
	#header-image,
	#header-menu {
		width: 300px;
	}	
}
@media screen and (max-width: 320px) {
	#header-image,
	#header-menu {
		width: 95%;
	}	
}

[James]

I have just upgraded to v2 of the theme, however the CSS code above does not seem to be working any more.

Any suggestions to make it work again, so that the header image matches the same width as the menu?

[Sakin]

@James: I see that your site header images matched the same width as the menu. You don’t need to disable responsive design. As the CSS above is for responsive design only.

[Author]

Posts