Possible to align text in Smugmug style?

david-lowdavid-low Amateur hobbyistSingaporePosts: 739Registered Users Major grins

Is there anyway to auto align the text with the picture in Smugmug style regardless of what chosen display size?

All pictures from this link
https://david-low.smugmug.com/Galleries/Travel/Beijing/i-hJKgqgc

Comments

  • AllenAllen "tweak 'til it squeaks" St. Louis, MoPosts: 9,622Registered Users Major grins
    edited January 28, 2019

    Been using this for years. Put in your "All Galleries" CSS.
    It centers caption. This is the best anyone has found over the years.
    Don't think there has ever been anything found to align with photo edge. It has been looked into many times.

    #sm-gallery .sm-tile-info {
        text-align: center;
    }
    
    Al - Just a volunteer here having fun
    My Website | My Blog
  • Hikin' MikeHikin' Mike Walkin' like a Penguin! Atwater, CaPosts: 4,354Registered Users Major grins

    SmugMug does include a image class for portrait images (.sm-tile-portrait), but it's useless to align captions to the portrait-format images. They need to include that class in the .sm-gallery-image-container for it to be useful.

  • david-lowdavid-low Amateur hobbyist SingaporePosts: 739Registered Users Major grins

    @Allen said:
    Been using this for years. Put in your "All Galleries" CSS.
    It centers caption. This is the best anyone has found over the years.
    Don't think there has ever been anything found to align with photo edge. It has been looked into many times.

    #sm-gallery .sm-tile-info {
        text-align: center;
    }
    

    Tks for help.

    I put in the CSS and its not in the middle of the picture. It does shift but its similar to previous, neither here nor there.

    Or are you refering the CSS centers the caption in the middle of the screen.

    Below screen shot after CSS is input.

  • Hikin' MikeHikin' Mike Walkin' like a Penguin! Atwater, CaPosts: 4,354Registered Users Major grins

    Add max-width: 100%:

    #sm-gallery .sm-tile-info {
      text-align: center;
      max-width: 100%;
    }
    
  • david-lowdavid-low Amateur hobbyist SingaporePosts: 739Registered Users Major grins
    edited January 29, 2019

    @Hikin' Mike said:
    Add max-width: 100%:

    #sm-gallery .sm-tile-info {
      text-align: center;
      max-width: 100%;
    }
    

    TQ so much Mike. It works !!!

    But I still prefer to align with photo left edge if its ever possible and someone has the CCS code.

Sign In or Register to comment.