Change only left margin on galleries

bokehlover71

In the layout editor I can only set the side margins for both left and right side at the same time. How can I change only the left side on all folders, pages and galleries?

I have set the side margins to 50px for the entire site, but because I have a sidebar to the left, the page content only needs an extra margin to the left, beside the sidebar. If set on both sides, the right margin gets too large.

leftquark

Could you send me a link to your site so I can see an example of what you're talking about? I looked at your site and I didn't see a sidebar on the left.

bokehlover71

leftquark wrote: »

Could you send me a link to your site so I can see an example of what you're talking about? I looked at your site and I didn't see a sidebar on the left.

I have changed the site design, that's why you didn't see it :-)
I put it back now so you can see. Try to go to for example Bilder > Favoritter.

leftquark

If you just want to move the left sidebar you can use:

/* Move the left nav sidebar to the right */
.sm-page-layout-region-body .sm-page-layout-region-left {
  margin-left: 15px;
}

bokehlover71

leftquark wrote: »

If you just want to move the left sidebar you can use:

/* Move the left nav sidebar to the right */
.sm-page-layout-region-body .sm-page-layout-region-left {
  margin-left: 15px;
}

Thanks, but I don't want to move the sidebar.
On the entire site I want the margins to be (from the left): 50px > Sidebar > 50px > Content > 50px.

leftquark

bokehlover71 wrote: »

On the entire site I want the margins to be (from the left): 50px > Sidebar > 50px > Content > 50px.

Aha, now I understand what you're looking for. To achieve that all you need to do is add the following:

/* Set the margins of the body content of the page to be as follows:
   Top: 58px
   Right: 0px (it's already 50 pixels indented, so don't bring it in any more 
   Bottom: 0px
   Left: 50px 
*/
.sm-page-layout-region-center .sm-page-layout {
  margin: 58px 0px 0px 50px !important;
}

Let me know if that doesn't work for you.

bokehlover71

leftquark wrote: »

Aha, now I understand what you're looking for. To achieve that all you need to do is add the following:

/* Set the margins of the body content of the page to be as follows:
   Top: 58px
   Right: 0px (it's already 50 pixels indented, so don't bring it in any more 
   Bottom: 0px
   Left: 50px 
*/
.sm-page-layout-region-center .sm-page-layout {
  margin: 58px 0px 0px 50px !important;
}

Let me know if that doesn't work for you.

Thanks! It looked great at first, but it didn't look so good on mobile phones. A wide margin appeared on left side, and the content was moved out of the screen on the right side. So I had to remove the code again. Maybe the original layout gives the best "balance" after all.

Allen

Looks like it needs to apply using @media in the CSS to only a large screen and bigger.

leftquark

bokehlover71 wrote: »

Thanks! It looked great at first, but it didn't look so good on mobile phones. A wide margin appeared on left side, and the content was moved out of the screen on the right side. So I had to remove the code again. Maybe the original layout gives the best "balance" after all.

We can limit this for non-mobile displays only by using:

/* For non-mobile displays do the following */
@media only screen and (min-width: 801px) {

/* Set the margins of the body content of the page to be as follows:
   Top: 58px
   Right: 0px (it's already 50 pixels indented, so don't bring it in any more 
   Bottom: 0px
   Left: 50px 
*/
.sm-page-layout-region-center .sm-page-layout {
  margin: 58px 0px 0px 50px !important;
}
}