Support » Theme: Satisfy » Shortcut to no-margin content?

  • Resolved Ali.T.

    (@polaatx)


    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;
    } */
    
Viewing 2 replies - 1 through 2 (of 2 total)
  • Theme Author Webbjocke

    (@webbjocke)

    Hi sorry I’m not sure this theme is compatible with that kind of layout. It wasn’t really built for that and is very dependent on bootstrap and the 1200px layout, and would probably require lots of css to make it look ok. Don’t want to say too much about your approach, I tried it myself a bit but didn’t really get it to work.

    I appreciate your feedback. I agree with you. Hunting down and neutralizing all the margins and paddings already in the theme and then assigning margins and padding anew to some elements (like text) and not others (like img and iframe) seems to open a can of warms.

    Thank you.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Shortcut to no-margin content?’ is closed to new replies.