Post titles overlap article text. How do I fix?

try to use firebug

your problem is in the css, probably in the h3 properties
modify it like you want it to be
(example, if you put a large width, the title will be on one line, but it will go outside of the div)

Ummmm, what is “firebug”? What does it do?

I am not a programmer. Can you give a more step-by-step explanation of the problem and how I can fix it? Thanks.

Comment out /*line-height:#px;*/ or remove the line-height from
“.post-left { and #content h3 { in style.css. Then add some margin-top: 10px; or so to the h3 to get it away from the border. Also removing the height from .post-left will fix the overlap, but then you need increase the length of the left and right borders continue down in this image. https://mmachalet.com/wp-content/themes/brownline/images/entry_title.jpg

I would make it 150px; tall at to give any slack for how ever big the title may be.

Firebug is a Firefox add-on that will allow you to see what css is effecting what and to edit CSS live in the browser for testing / troubleshooting. It does much more…
https://getfirebug.com/

What do you mean by “Comment out /*line-height:#px;*/ “? Are you telling me to remove that line?

Also, when you tell me to do something to the “h3”, can you be a little more simplistic in your explanation? Assume that I don’t know what an “h3” is (I don’t).

Please give an explanation (preferably detailed with exactly what line of code to add and where to add it) that is simple enough for someone with no knowledge of HTML or CSS to follow. Thanks.

your title are between html tags “h3”
(for the explanation, title are always place into tags <hx> where x is a number …h1 means “super important title”, h6 means “not important title”)

you can change the look of your title (and other tags) in your CSS (you can find it in the style.css into your theme folder).

you have to edit your css to change how it looks like.
for example in your website,
your h3 which are into div (another type of tags) which have the id content (it contains all the article of the page) are designated by :

#content h3 {
color:#AAAAAA;
font-family:Times New Roman,Georgia,Trebuchet MS;
font-size:24px;
font-weight:normal;
line-height:67px;
margin:0;
padding:0 0 0 15px;
text-transform:uppercase;
}

I think the properties are easy to understand : font-size means…the size of the font =p

I haven’t time to look what line you should change, but maybe, giving a width (add the line width : xxxx px;) and reduce the font size will help you…
ps : margin is an extern marge and padding are intern marges, maybe increase the marges to move the article?

hope you will understand my explanation (hard for me to know if I’m easy to understand or not, -I’m french)

you can search a tuto for css on google :p

Adjust the height declaration on the the following two styles and see if that’s what you’re after….

.content_title and .post_left

To find the classes look in your theme’s style.css for this..

/************************************************
*	Content 					     		    *
************************************************/

Following that text is several styles, the ones we’re after are the third and forth ones (which will be obvious because the names match those i’ve mentioned above).

Simply remove the line that says..

height: 67px;

Or alternatively try the auto setting.. eg.

height: auto;

See if that has the desired effect… ??