Shortcut to no-margin content?

Hello Webbjocke,

I think if Satisfy offers edge-to-edge banners, then it should also offer edge-to-edge media in the content area. It just looks better. Edge-to-edge, margin-less pics and iframe embeds (like Youtube clips and gmaps) would be in harmony with the top of the page and make the page look more dramatic.

Here’s a sample on this site: https://www.secretcompass.com/transpanama-thru-hike-rick-morales-darien-gap/

I spent quit a bit of time trying to achieve this by adding custom css to take out the layers of margin and padding but add back in margin and padding for text. See of my stuff below. It got to be sort of a mess and looked awful on small screens. I think part of the problem is Satisfy’s CSS is a mixture of your css and bootstrap’s css. Also I’m not a CSS expert by any means and don’t know how to target small screens separately.

I’d like to get your opinion. Is there a shortcut to render media and iframes without margin?. Like is it possible to create a div.class that magically renders edge-to-edge?

Or am I on the right path by just hunting down instances of margin and padding in the code and neutralize them in custom code?

/* no margins */

body #primary-content p {
font-size: 20px;
margin: 0 10px 10px;
max-width: 1000px;
margin-left:auto;
margin-right:auto;
}
/*.container-fluid {
    padding-right: 0px;
    padding-left: 0px; } */

/*#main, .sfy-pad-left, .sfy-pad-right {
    padding: 0 0px; }

.content-wrapper {
    max-width: 2000px;
} */
/*.col-xs-12 {
padding-left:0px;
padding-right:0px;
} */

/*.wp-caption img {
    max-width: 100%;
}
.wp-caption {
padding: 5px 0px;
border:none;
} */