Featured image left margin inside each post

Change the width of your featured image. Then it will become smaller and it isn’t glued to the left menu anymore.

Johanna

The featured image is in a DIV with an class of post-thumbnail, so you can add a CSS rule like this to the end of your child theme’s style.css file:

.post-thumbnail {
   margin-left: 25px;
}

To prevent the home page from adding the left margin to the post-thumbnails, though, you can target just the thumbnails on the home page by adding body.home to the selector:

body.home .post-thumbnail {
   margin-left: 0;
}

CrouchingBruin has written:

.post-thumbnail {
margin-left: 25px;
}

Hummm…do not ask me why but it changes nothing apparently…

I see a left margin on the featured (top) image, although now the right sidebar text overlaps it. Plus you’ll need to add a media query to clear the left margin on mobile devices. Try clearing your browser’s cache.

Modify the CSS so it looks like this:

.post-thumbnail {
   margin-left: 40px;
   width: auto;
}

This should take care of the overlapping right sidebar.

For media query, add this:

@media screen and (max-width: 673px) {
   .post-thumbnail {
      margin-left: 0;
   }
}

This will remove the left margin on a mobile device so the image will span the width of the window.

CrouchingBruin has written:

Try clearing your browser’s cache.

You were right ??

Modify the CSS so it looks like this:
.post-thumbnail {
margin-left: 40px;
width: auto;
}

Great!

To prevent the home page from adding the left margin to the post-thumbnails, though, you can target just the thumbnails on the home page by adding body.home to the selector:
body.home .post-thumbnail {
margin-left: 0;
}

Great!

Topic closed. Thank you very much for your assistance! ??