CSS for space between photos in galleris

albza

Hi everybody!

I'm trying to find a way to make spaces between photos in galleries narrower when in mobile view. I set 12px in desktop mode and I think 6 to 8px will be ok for mobile, so I wrote this

/* 8px between photos in mobile */
@media only screen and (min-width: 300px) {
.sm-tiles-spacing-12 .sm-tile {
margin: 0 0 8px 8px;
} }

This doesn't work, any help?

Thanks!

Hikin' Mike

You do know this will decrease the margin on EVERYTHING with a screen size of 300px and larger right?

You just need to add .sm-user-ui:

/* 8px between photos in mobile */
@media only screen and (min-width: 300px) {

    .sm-user-ui .sm-tiles-spacing-12 .sm-tile {
        margin: 0 0 8px 8px;
    }

}

albza

> @"Hikin' Mike" said:
> You do know this will decrease the margin on EVERYTHING with a screen size of 300px and larger right?
>
> You just need to add .sm-user-ui:
>
> /* 8px between photos in mobile */ @media only screen and (min-width: 300px) { .sm-user-ui .sm-tiles-spacing-12 .sm-tile { margin: 0 0 8px 8px; } }

Allright, this does somethings. Do you know if I can set it to decrease margin on screen narrower than 300px?
I tried to set the gallery settings to 4px and then apply the following css, but I wouldn't work...

/* 8px between photos in mobile */
@media only screen and (min-width: 300px) {
.sm-user-ui .sm-tiles-spacing-4 .sm-tile {
margin: 0 0 12px 12px;
}
}

Hikin' Mike

@albza said:
Allright, this does somethings. Do you know if I can set it to decrease margin on screen narrower than 300px?

I tried to set the gallery settings to 4px and then apply the following css, but I wouldn't work...



/* 8px between photos in mobile */

@media only screen and (min-width: 300px) {

.sm-user-ui .sm-tiles-spacing-4 .sm-tile {

margin: 0 0 12px 12px;

}

}

You need to use the max-width instead of the min-width:

/* 8px between photos in mobile */
@media only screen and (max-width: 300px) {

    .sm-user-ui .sm-tiles-spacing-12 .sm-tile {
        margin: 0 0 8px 8px;
    }

}

albza

@Hikin' Mike said:

@albza said:
Allright, this does somethings. Do you know if I can set it to decrease margin on screen narrower than 300px?

I tried to set the gallery settings to 4px and then apply the following css, but I wouldn't work...



/* 8px between photos in mobile */

@media only screen and (min-width: 300px) {

.sm-user-ui .sm-tiles-spacing-4 .sm-tile {

margin: 0 0 12px 12px;

}

}

You need to use the max-width instead of the min-width:

/* 8px between photos in mobile */
@media only screen and (max-width: 300px) {

  .sm-user-ui .sm-tiles-spacing-12 .sm-tile {
      margin: 0 0 8px 8px;
  }
  
}

Whoa! I worked

Even if there's a little problem in the side margins, the left one is smaller.... I don't know why. I can't set margins in the gallery block
You can see it from this link, set the page to match mobile settings of max 670px

https://albertozanardo.smugmug.com/Portfolio/Ritratti/

Hikin' Mike

@albza said:
Whoa! I worked

Even if there's a little problem in the side margins, the left one is smaller.... I don't know why. I can't set margins in the gallery block
You can see it from this link, set the page to match mobile settings of max 670px

https://albertozanardo.smugmug.com/Portfolio/Ritratti/

Remove this:

/* 8px between photos in mobile */
@media only screen and (max-width: 670px) {

    .sm-user-ui .sm-tiles-spacing-12 .sm-tile {
        margin: 0 0 6px 6px;
    }

}

Use this instead:

/* 8px between photos in mobile */
@media only screen and (max-width: 670px) {

    .sm-user-ui .sm-gallery {
        margin: 0 0 12px 12px;
        }   

    .sm-user-ui .sm-tiles-spacing-12 .sm-tile {
        margin: 0 0 6px 6px;
    }

}

albza

@Hikin' Mike said:

@albza said:
Whoa! I worked

Even if there's a little problem in the side margins, the left one is smaller.... I don't know why. I can't set margins in the gallery block
You can see it from this link, set the page to match mobile settings of max 670px

https://albertozanardo.smugmug.com/Portfolio/Ritratti/

Remove this:

/* 8px between photos in mobile */
@media only screen and (max-width: 670px) {

    .sm-user-ui .sm-tiles-spacing-12 .sm-tile {
        margin: 0 0 6px 6px;
    }

}

Use this instead:

/* 8px between photos in mobile */
@media only screen and (max-width: 670px) {

  .sm-user-ui .sm-gallery {
      margin: 0 0 12px 12px;
      }   

    .sm-user-ui .sm-tiles-spacing-12 .sm-tile {
        margin: 0 0 6px 6px;
    }

}

That's perfect! I've only changed some numbers to fit it better
Thank you again for your help!