The image grid on the actual page itself isn't quite as neat as your demo. What should I do?

This can vary slightly depending on the theme.

2) In the CSS file, which you can find under Admin > Themes > Template Editor > Assets > shopifygallery.css, there is a class called .galleryitem as seen below:
.galleryitem {
  width: 300px;
  margin: 10px;
  float: left;
}
Adjusting the width to 280px (or around there) should fix this.
Still stuck?  Just email us at support@shopifyninjas.com.
Have more questions? Submit a request

3 Comments

  • 0
    Avatar
    Chris Dawson

    NB you can also fiddle with the margin CSS - i changed mine to have only right and bottom margins (rather than 10px all the way around which margin:10px will do)

  • 0
    Avatar
    Tristan King

    Nice tip. Thanks Chris!

  • 0
    Avatar
    Kenny LEe

    Hi There,

     

    I don't see this code to adjust in the css section. Instead i have the following:

     

    .galleryitem {
    float: left;
    }

    .galleryitem1 {
    {% if settings.g_1_number_of_columns == "2" %}
    width: 48%;
    margin: 1%;
    {% elsif settings.g_1_number_of_columns == "3" %}
    width: 31%;
    margin: 1%;
    {% else %}
    width: 23%;
    margin: 1%;
    {% endif %}
    float: left;

     

    Can you please advise what i should adjust in order to make the thumbnails a little smaller?

     

    Thanks

Please sign in to leave a comment.
Powered by Zendesk