How to reduce spacing around H1 and content on a WordPress template?

HTML & CSS
1

Hello

I have a question about header and content on this webpage:

http://www.vumii.com/products/accuracii-ml/

As you can tell, the header and content above the fold are restrained within their space as though they are located in invisible rectangle.

I tried reducing padding and it helped on other pages but this is the only page that I am yet to get straight. This is WordPress based website with CSS stylesand I don’t know which rule is responsible for width of content/rectangle where header and text is located.

I remember playing with H1 but no changes were made meaning something else takes precedence over part I have tried editing?

2

Am not sure I understand what you are trying to accomplish specifically. But the elements and classes in you header are:

.one_half, .headerText, h1, .one_half.last … try searching our CSS for declarations in those rules.

Also , am taking a wild stab that what you want to do is have some ‘white space’ at the bottom of your text. I fear that you may have painted yourself into a corner in that regard, as your headers seem to be set at a fix height, you may need to rethink your entire strategy on how you have coded those.

3

Thanks for reply. My goal is to fit H1 and content below inside header’s background so it won’t overlap and won’t leave header area. You can see that all that H1 and text is limited in space and less space sentences have, more they are to have line breaks which push content further below header’s background in my case.

4

Well the thing is , you have painted yourself into a corner… you bg image is always going to be be a fix height and for what you what you need to think FLUIDITY. Your containing element should expand if your text block becomes tall. You cant really put 10lbs in a 5lbs bag.

I would recode your banner area: For proof of concept, and as a learning tool, take the following code into consideration ( you will, of course need to tweak this into your WP template, as it is WP tha’ts generating the HTML anyway):


<html>
	<head>
		<title></title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<meta name="viewport" content="width=device-width">
		<style type="text/css">
		
#intro  {  background: url(header_bkg_orange.png) 0 100% repeat-x #000;}
#intro .one_half{	 overflow: hidden}
#subpage_header_top{ overflow: hidden; max-width: 960px; margin:0 auto;}

#subpage_buttons, #intro{	border-top:8px solid orange; }
#intro .one_half.last{ float:right; padding:1em }

#subpage_buttons{ text-align: center; padding:25px 0 ; margin-top: -8px;border-bottom:8px solid orange; background: #eee}
#subpage_buttons a{ display:inline-block;  height:45px; width:212px; overflow:hidden;  vertical-align: middle; margin-left:-1em;}
#subpage_buttons a+a{margin-left:1em;}
#subpage_buttons a.brochureB:before{ content:url(button_brochure-1.gif)}
#subpage_buttons a.galleryB:before{ content:url(button_view_gallery-1.gif)}
 .headerText{ padding-bottom: 2em; font-size:80%}
.headerText, h1{color:#fff; font-family: sans-serif;  }
 		</style>
	</head>
	<body>
<div id="intro">
  		<div id="subpage_header_top">
			<div class="one_half last"><img src=" header_product_accuraciiML_photo.jpg" class="product_photo"></div>  
			<div class="one_half">
				<h1>Accuracii ML - Advanced Dual Channel Short-Mid Range Cameras</h1>
				<p class="headerText">Vumii Accuracii ML is a powerful day-and-night, multi-sensor observation system especially developed for security applications. It allows mid-range detection and observation using state-of-the-art 17µ640 x 480 thermal technology. Vumii&#8217;s Accuracii ML features either a 15-100mm Continuous Zoom head or a 45/135mm dual field of view head for day and night operation and a 1/4&#8221; CCD camera for daytime operation.
</br>
Vumii Accuracii ML is ideal for both the detection and assessment of security threats. Vumii Accuracii ML is ruggedized to withstand the harshest weather and environmental conditions, including rain, direct sunlight, high humidity and dust..</p>
		</div>
		 </div>

<!-- intro--></div>
 		<div id="subpage_buttons">
			<a href="/video-gallery-siiaccuraciiml" class="galleryB"><img src="/wp-content/themes/infocus/images/button_view_gallery.gif">View Gallery</a>
			<a href="ftp://ftp.vumii.com/Documentation/Accuracii/Vumii_Accuracii_ML_Brochure.pdf" target="_blank" class="brochureB">Vumii AccuraciiML Brochure</a></div><div class="clearboth">
		</div>
 	</body>
</html>

You will need this trimmed down image of your header.

Side note, you should avoid the copious use of IDs. It may make issues with specificity hard to solve later on.

Hope that helps.

5

Thanks! I have a question about containing element that restricted text from having more room horizontally. I would want to extend that containing element but have no idea how, what is it called in CSS do so at least I could find it in template.

I think there’s global CSS for current theme and there’s inFocus plugin that adds additional CSS to done elements. When it comes to things like these, you need to identify which takes precedence first to modify the right element because you could change the one that was overridden only to add to mess and confusion.