Post Featured Image overlaps Title

When I insert the featured image, it overlaps the post Title and gets cut off. How can I fix this?

Please provide a link to one or two example post where this is an issue.

As I mentioned in your other post, you’ll need to turn off your right-click prevention script to allow people to user their browser inspectors to help you. Thanks.

Looks like you’ve added a large negative margin on entry titles, which is shifting them over so they overlap with the featured images:

.entry-title {
    font-size: 24pt;
    font-weight: 300;
    margin-left: -150px;
}

Removing the line margin-left: -150px; should fix the problem, as you can see here:

View post on imgur.com

Also please keep in mind that when you alter things like column widths in custom CSS, you need to be careful not to damage the site’s responsiveness.

Right now your site does not display properly at smaller screen sizes, as you’ve declared a fixed 725px width, which overrides the theme’s built-in responsive styles.

To overcome this problem, you need to put these types of CSS overrides in media queries. You can learn more about using media queries that target certain screen sizes here:

http://en.support.wordpress.com/custom-design/custom-css-media-queries/
http://css-tricks.com/snippets/css/media-queries-for-standard-devices/
http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries

Media queries are a simple concept but powerful in practice, and can take some experimentation and testing to get right.

I need is to extend the main content area to the left. On the home page I have about 2 inches of white space on the left, and on the post pages it’s about three inches, which makes the content area much too narrow.

Keep in mind that in the world of the web, inches, centimetres, and other traditional analogue units aren’t used to reference layout dimensions. This is because only pixels have meaning on digital devices – for example, what looks like an inch on your device may look like two on someone else’s, depending on the screen resolution and window size of the device.

You also need to be careful not to mess with a site’s responsiveness. Modern themes are designed to automatically adjust to devices of all sizes, from desktop to tablets to phones. So any width adjustments should go into media queries, as I explained above.

The overall width of Sela’s content area is set to a maximum of 1180px, as you can by using a browser inspector or by looking at the theme’s CSS file:

.site {
    margin: 0 auto;
    max-width: 1180px;
    padding: 0;
}

This ensures that the main column remains easy to read, even on large screens.

If for some reason you want to widen that, you could add something like this in your custom CSS, to limit the change only to wider browser windows:

@media screen and (min-width: 1200px) {
  .site {
    max-width: 1300px;
  }
}

You can adjust the width of the main column in similar fashion – make sure you put it in a media query so it doesn’t negatively affect other screen sizes.

Keep in mind that modifying the width of the page affects the display of your featured images, which now no longer expand the width of the column. Adjusting that is another, more complicated project, requiring a custom function in a child theme – it can’t be done with CSS alone.

I’m still not seeing any overlapping on http://mslake.me/best-game-of-thrones-websites/

I checked in:

Firefox 45.0.2
Chrome 50.0.2661.75
Safari 9.1

What browsers and versions are you seeing the issue in? Have you tried more than one browser?

You could turning off all your browser extensions/plugins/add-ons to see if something is causing this.

Have you tried more than one browser, as I asked before? That would help narrow down the source.

If you do only see the issue in one browser, it may be an extension you’re running that’s conflicting. You can turn off all extensions temporarily in Chrome by following the instructions under “Turn extensions on or off” here:

https://support.google.com/chrome_webstore/answer/2664769?hl=en&rd=2