Removing margins for image in a single blog post

SindrusPilatus

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:

https://productiveheadspace.com/productivity-the-complete-picture/

The password is: infographic

Pablo

Hello,

You would have to use the "Builder" template and attach it inside the Muffin Builder.

Then, in the section settings, turn on the Full Width options with enabled option to remove the margins.

http://prntscr.com/qdi7bq

Thanks

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

SindrusPilatus

Pablo, you've made my day.

I didn't know it was so easy.

Thank you so much.