Removing margins for image in a single blog post
Hi,
I want to post an image (a long infographic, 600px wide, 6000px long) and I’m trying to make it go all the way to the edge, removing the white margins so that when mobile users scroll through it, it fills the whole screen.
I have tried a few different css codes:
.post-598 p {
margin: 0px -33px 0px;
}
This makes the images go to the edge exactly how I’d like it to, but it cuts parts of the comment section on the left side. I looked for a way to put the margins on the sides of the comment section back again, but with no luck.
.post-598 img {
margin: 0px -33px 0px;
}
.post-598 img {
margin-left: -33px;
margin-right: -33px;
}
.post-598 img {
display: block;
margin: 0px -33px 0px;
}
I have tried several variations of the above code snippets where I targeted only the image (img) instead of the whole page (p). For some reason it is only the left margin that works. No matter how large I put the value for the margin-right, the right margin doesn’t change. What I end up with is no margin on the left side (as desired), and even more margin on the right side.
Is there a css code or some other trick that would achieve what I'm trying to achieve?
Any help would be greatly appreciated. Please let me know if you need some information from me.
Here is the link to the page:
The password is: infographic
Comments