[double-yu]

Hi again!

I’d like images in my blog to be slightly wider than text paragraphs (but equal width in the responsive mode). I managed to do this on index page, using feature image for posts and adding the following custom css:

@media screen and (min-width: 768px) {

.blog-posts p {
padding: 0 40px;
}
}

In single-blog template I also can make text paragraphs narrower, using the following css:

@media screen and (min-width: 768px) {

.blog-single .post .entry-content > p {
padding: 0 40px;
}
}

But this code also affects images inside the post, because they are located inside paragraphs. I tried to add negative paddings to images inside the paragraphs to make them wider than text blocks (it was something like

.single-post .post. entry-content p img {
padding: 0 -40px;
} )

but I’m not sure it’s a good idea and it didn’t work anyway.

Can you help me please? My url is double-yu.ru

[ahmetsali]

Hi, you can try this one;

@media screen and (min-width: 768px) {
    .blog-posts.readable-content {
        max-width: 620px;
    }
    .blog-posts.readable-content .featured-image img {
        width: 130%;
        max-width: none;
        margin-left: -15%;
    }
}

note that : negative padding value doesn’t effect anything but negative margin does.