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;
}
Thread Starter
lofaro
(@lofaro)
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.
Thread Starter
lofaro
(@lofaro)
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! 🙂
