Need to center align thumbnails in grid view

  • Unknown's avatar
    rijusarkar · Member ·

    Hello,

    I am using the theme Espresso which has a grid view option. However, the featured images are becoming left aligned in the grid view, and I want them to be center aligned.

    I’ll appreciate some help. Thanks!

    The blog I need help with is: (visible only to logged in users)

  • staff-eleanor · Staff ·

    Hello there,

    Here is the documentation for your theme: Espresso.

    Since it’s a paid theme, I am unable to test it.

    Maybe this requires a change in CSS??

    Or perhaps you can resize your original image in your media library to make them more square.

  • Unknown's avatar
    thesacredpath · Member ·

    Hi @rijusarkar, I’ve viewed your site and looked at a number of your pages that are showing in grid view, and do not see any left aligned. On some pages, I see a post on the far right when I have my browser window widened that does not have a featured image, and on those the color of the background is nearly the same as the dark blue, so it appears as if there is a gap on the right. On pages with less that 6 posts, such as Writing 101 which has only two, the images are to the left.

    Due to the way the HTML is structured for the grid layout, we cannot center the images on pages with less than 6 posts in Espresso.

  • Unknown's avatar
    rijusarkar · Member ·

    Hi @thesacredpath, I should have been more clear. I meant the cropping of the thumbnails. The featured images are mostly in landscape aspect ratio, and the thumbnails that appear in grid view are cropping from the left of those landscape images, which often leads to the essence of the image being lost.

    I wish to crop from center.

    Thanks!

  • Unknown's avatar
    thesacredpath · Member ·

    Ah, thanks for the clarification. The featured images in the grids are inserted with img html tags, so it is a bit of a challenge to adjust their position, and the Espresso theme does this is a unique way, which makes things even more difficult. With the following, on your Archives page, you will see that in one instance, the following code moves the image too far to the left and a band of blue appears on the right. For this to work, all images would need to be the same proportions of width to height, and close to the exact same size. If they are different, there could be issues like with the graphic text-looking image on the archive page with the following CSS. 

    .blog.grid-view .wp-post-image.attachment-espresso-full-bleed, .search.grid-view .wp-post-image.attachment-espresso-full-bleed, .archive.grid-view .wp-post-image.attachment-espresso-full-bleed, .portfolio.grid-view .wp-post-image.attachment-espresso-full-bleed {
  position: relative;
  right: 30%;
}

    Given the structure and way Espresso does the grid views, we are really limited on what we can do.

  • Unknown's avatar
    rijusarkar · Member ·

    Thanks a lot! This would definitely help.

  • Unknown's avatar
    thesacredpath · Member ·

    You are welcome.

  • Unknown's avatar
    annevwood · Member ·

    Hi, I am trying to have my portfolio pictures be placed one after another. (they are stacked one on top of another right now)
    I set this up in my illustration website but have forgotten how to do it on my music studio website. I remember there used to be buttons that let you do tiles, mosaic etc. but I can’t find those anymore. I think this is how I set up my illustrations
    Thanks, Anne

  • Unknown's avatar
    thesacredpath · Member ·

    Hi @annevwood, I checked your account, and none of the sites you have are using the Espresso theme. Since CSS is generally theme specific, can I ask you to create a new thread in the CSS Forum and give us a link to the site you are wanting help with? Many thanks in advance.

  • The topic ‘Need to center align thumbnails in grid view’ is closed to new replies.