Change margins on locked content blocks

bokehlover71

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

MarcQuinlivan

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.

bokehlover71

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.

bokehlover71

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' Mike

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.

bokehlover71

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' Mike

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 */

}

bokehlover71

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;
}

}