CSS for space between photos in galleris

albzaalbza Registered Users Posts: 10 Big grins
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!

Comments

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

    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;
        }
    
    }
    
  • albzaalbza Registered Users Posts: 10 Big grins
    > @"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' MikeHikin' Mike Registered Users Posts: 5,448 Major grins

    @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;
        }
    
    }
    
  • albzaalbza Registered Users Posts: 10 Big grins

    @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 B)

    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' MikeHikin' Mike Registered Users Posts: 5,448 Major grins
    edited September 14, 2017

    @albza said:
    Whoa! I worked B)

    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;
        }
    
    }
    
  • albzaalbza Registered Users Posts: 10 Big grins

    @Hikin' Mike said:

    @albza said:
    Whoa! I worked B)

    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!

Sign In or Register to comment.