Formatting an odd number of images in a gallery

  • Unknown's avatar
    jenkse · Member ·

    Hi everyone,

    I am currently in the process of redesigning globalgator.wordpress.com, and have encountered a bit of an issue with the image gallery on the homepage.

    I would like to feature all 21 bloggers on the homepage using a gallery with 4 to 5 images per row (as you can see here). However, since the amount of images I am using is odd, I’ve noticed that the final image is on a row all by itself and very large compared to the others.

    To try and fix this, I inserted some blank images onto the gallery, so the final two rows have three images each (as you can see here). Although this looks fine on desktop, the blank images do not work well with mobile and mess up the order of the gallery (mobile screenshot #1, mobile screenshot #2). Before redesigning this page, there were 7 rows of 3 bloggers, but I would really like to try and condense it so there are fewer rows.

    I was wondering if there is any better way I could achieve the desired look of the image gallery, so it looks good on both desktop and mobile? Any tips or advice about how I could achieve this using CSS would be very appreciated :)

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

  • staff-zinnia · Staff ·

    Hi –

    Thanks for getting in touch. I can definitely understand why you’re trying to customize that view of the bloggers so it is more symmetrical and aesthetic on the page. Good job, too, for checking the mobile presentation as well! That is how the majority of folks will view your site.

    One thing that this theme supports is an author bio line. You can include that automatically with each post. This setting can be found here: https://globalgator.wordpress.com/wp-admin/customize.php

    I’d also consider other ways to display the headshots of the bloggers if that’s vital to the project. You could use grouping them by geographic area with a more generic placeholder image. Use your site logo for example with the geographic area over top. Use 3 or 5 circles, and when somebody clicks on those it could open up another page with all of the bloggers from that area. Keep it simple yet effective.

    Perhaps, a better idea would be to use a slide show with the bloggers instead of trying to display all of them at once. This should work fine on mobile view too.

    WP
    Blocks » Slideshow Block
    in WordPress.com Support
    3 min read
    This guide will show you how to use the Slideshow block to add an interactive image slideshow to a post or page. Add the Slideshow Block To add the Slideshow block, click on the + Block Inserter icon and search for “slideshow”. Click it to add the block to the post or page. Add a new block and search for Slideshow. 💡 Using your keyboard, you can also type /slideshow on

    Here are some other tips to help you grow a bigger audience with this project.

    WP
    Getting More Views and Traffic
    in WordPress.com Support
    5 min read
    One of the most frequent questions our community members ask us — and themselves — is how to get more people to visit their site. There’s no magic formula, but there are ways to increase your website traffic with a few WordPress.com tools and best practices. Help Search Engines Find Your Site If you want your content to be indexed by search engines such as Google and Bing, set your priva
  • The topic ‘Formatting an odd number of images in a gallery’ is closed to new replies.