Change margins on locked content blocks

bokehlover71bokehlover71 Registered Users Posts: 156 Major grins

Is it possible to change the margins on locked content blocks, like the gallery content and the keyword page?

Comments

  • MarcQuinlivanMarcQuinlivan Registered Users Posts: 56 Big grins
    edited January 27, 2018

    Go to Settings\Content and Design and then on the Layout tab you can change the width of the theme . It looks like the blocks are 100% of the theme width.

    You can also change the "body width" further down the page.

  • bokehlover71bokehlover71 Registered Users Posts: 156 Major grins
    edited January 27, 2018

    Yes, but it seems like the space between the content in the content blocks and the page background always have to be 12 px. I have a page background color that differs from the body background. But I wish it was possible to adjust the space between the content and the page background.

    Btw: I can't see any difference between the Layout width and the Body width. To me it seems like they do exactly the same.

  • bokehlover71bokehlover71 Registered Users Posts: 156 Major grins
    edited January 27, 2018

    I found it now myself. For the gallerys I just add a CSS with ".sm-gallery", then enter the margins I want.

    For the Keyword page I use ".sm-page-layout-row-reserved".

  • Hikin' MikeHikin' Mike Registered Users Posts: 5,448 Major grins

    It doesn't have to have a 12px. You can change those to suit, even 0. You should have to add a CSS block to do that. In all Galleries you can change the margins. Same with the Keyword block.

  • bokehlover71bokehlover71 Registered Users Posts: 156 Major grins

    I managed to do it. But it doesn't look good on mobile phones, because there I don't need the extra margins. Other margins don't affect mobile phones, but those I enter with CSS do.

    Is there a way to get the new CSS margins to not affect small mobile screens?

  • Hikin' MikeHikin' Mike Registered Users Posts: 5,448 Major grins

    SmugMug switches to mobile device at 736px so you can put that code into this to "remove" the desktop CSS. Obviously you need to change /* code here */ in place of your code.

    @media screen and (max-width: 736px){
    
        /* code here */
    
    }
    
  • bokehlover71bokehlover71 Registered Users Posts: 156 Major grins

    Thanks a lot! That did the trick.

    I fumbled a bit, but finally I managed to do it right:

    .sm-gallery {
    margin-right: 100px;
    margin-left: 100px;
    }

    @media screen and (max-width: 736px){

    .sm-gallery {
    margin-right: 12px;
    margin-left: 12px;
    }

    }

Sign In or Register to comment.