[HjalmarCarlson]

I just removed all of the custom styles I have applied and added your css and it still didn’t adjust the gutters. The gutters are visible if I remove the border but they do not expand at all when you change padding value.

[HjalmarCarlson]

Kyle,

Do you have any suggestions on how to resolve?

Can you share your demo link? Then I can see what’s different.

[HjalmarCarlson]

Kyle,

I’ve add the css you shared but it didn’t change anything, you can see the page here: http://hjalmarcarlson.com/lab/hailnails/blog/

I believe that the gutters need to be modified in the masonry/isotope settings. Can this be done in the Atelier theme files?

[HjalmarCarlson]

This reply has been marked as private.

[HjalmarCarlson]

I’ve also added this to the javascript editor:

$('.blog-items').isotope({
  masonry: {
    gutterWidth: 20
  }
});

[HjalmarCarlson]

To follow up on this, I noticed that there is a -15px margin that is being added to the gutters but when I overwrite those margins nothing changes.

Here is what I modified, located in sf-combined.min.css:

ul.blog-items.gutters {
    margin-left: -15px;
    margin-right: -15px;
}

[HjalmarCarlson]

Awesome! Thanks for the help Mohammad!

[HjalmarCarlson]

This reply has been marked as private.

[HjalmarCarlson]

This reply has been marked as private.

[HjalmarCarlson]

Thanks for the response Mohammad. I replaced my code with what you supplied and the output didn’t change. Here is what rendered:

<li itemscope="" itemtype="http://schema.org/BlogPosting" style="opacity: 1; position: absolute; left: 0px; top: 15px; background: url(http://hjalmarcarlson.com/lab/hailnails/);" class="blog-item col-sm-4 uncategorized post-190 post type-post status-publish format-standard hentry category-uncategorized item-animated" id="190" data-date="1445876386">

I was expecting the complete thumbnail URL here:
background: url(http://hjalmarcarlson.com/lab/hailnails/);

What other things should I try here?

[HjalmarCarlson]

Thanks Mohammad, I found the section that I need to add to but what I’m adding doesn’t seem to be return the actual post thumbnail. Is there a function built into Atelier that I can call here?

Here is the snippet i’ve added:
style="background:url('.get_post_thumbnail_id( $post_id ).');"

Here the complete variable:
$blog_items_output .= '<li itemscope itemtype="http://schema.org/BlogPosting" style="background:url('.get_post_thumbnail_id( $post_id ).');" class="blog-item ' . $item_class . ' ' . $term_slug . ' ' . implode( ' ', get_post_class() ) . '" id="' . get_the_ID() . '" data-date="' . get_the_time( 'U' ) . '">';

What I need to do in the end is set the post thumbnail as the background image for the blog_item.

[HjalmarCarlson]

Any thoughts here? Which file generates the layout for the masonry blog format?

[HjalmarCarlson]

NVM, I never set prices for the products. Resolved.