Display Search Results on same page without page refresh

Give this a shot:

.masonry-container {
    padding-top: 4px;
}

nice it worked, thank you :)

Do you know how i can make search results page fullwidth, eliminate the left and right side white spaces?

Example Search Results page:

You can create a new Layout Element in "Appearance > Elements" (Elements module must be active), and set the "Container" tab to "Full Width".

Then choose the search results in the Display Rules.

wow cool, i never knew about layout, i just did changed it to full width but doing so removed the left and right padding, look:

how do i get the left and right padding back?

Try changing:

.masonry-container {
    padding-top: 4px;
}

To:

.masonry-container {
    padding: 4px;
}

It moved all the images to the left side :( but it did add padding, look:

That's strange.

I suppose you could try this instead:

.search-results .site-main {
    padding: 4px;
}

I added the code but it didn't do anything, here is all the code im using:

.search-results .page-header,
.search-results .entry-header,
.search-results .entry-summary {
display: none;
}

.search-results .inside-article {
padding-top: 0px;
padding-left: 4px;
padding-right: 4px;
padding-bottom: 0px;
}

.post-image {
margin-top: 0px;
}

@media (max-width: 1024px) and (min-width: 768px) {
.generate-columns,
.grid-sizer {
width:25%
}
}

.masonry-container {
padding: 4px;
}

.search-results .site-main {
padding: 4px;
}

Maybe fullwidth makes it that there is only 1 row? Do we need to add rows? On mobile it looks weird too.

Can you try removing this CSS?:

.masonry-container {
    padding: 4px;
}

that fixed the layout, but in between the images there is no padding/gutter:

So instead of using the Layout Element to make it full width, try using this CSS:

.search-results .site.container {
    max-width: 100%;
}

Nice, it worked:

Lastly, how an I use this exact layout on the homepage?

Currently if you click on my logo image, it takes you to the homepage and also when the "all" tag is clicked on that's underneath the searchbar it shows all the images on the website. Currently, I have the "all" tag connected to a category page, that way I can put connected all the images to the "all" category without having people see an "all" tag on product pages. That's why I created the "all" category page, so I can have a way to organize all the images in a single ALL category.

Do I put the 'all" category page on the homepage? Im still trying to figure out how to do it.

Basically I want the homepage to show all my sites images with this layout we just made:

You could set your home page to be the posts page in "Settings > Reading".

However, we'll need to adjust some of the code we used.

Can you share the complete solution we came up with so I can tweak it?

I just set homepage to latest posts page.

I believe this is all we used, just custom css to change the search results page:

.search-results .page-header,
.search-results .entry-header,
.search-results .entry-summary {
display: none;
}

.search-results .inside-article {
padding-top: 0px;
padding-left: 4px;
padding-right: 4px;
padding-bottom: 0px;

}

.post-image {
margin-top: 0px;

}

@media (max-width: 1024px) and (min-width: 768px) {
.generate-columns,
.grid-sizer {
width:33.3333333333%
}
}

.search-results .site-main {
padding-top: 8px;
padding-left: 4px;
padding-right: 4px;
padding-bottom: 0px;

}

.search-results .site.container {
max-width: 100%;
}

You would do this instead:

.search-results .page-header,
.search-results .entry-header,
.search-results .entry-summary,
.blog .page-header,
.blog .entry-header,
.blog .entry-summary,
.archive .page-header,
.archive .entry-header,
.archive .entry-summary {
    display: none;
}

.search-results .inside-article,
.blog .inside-article,
.archive .inside-article {
    padding-top: 0px;
    padding-left: 4px;
    padding-right: 4px;
    padding-bottom: 0px;
}

.post-image {
    margin-top: 0px;
}

@media (max-width: 1024px) and (min-width: 768px) {
    .generate-columns,
    .grid-sizer {
        width:33.3333333333%
    }
}

.search-results .site-main,
.blog .site-main,
.archive .site-main {
    padding-top: 8px;
    padding-left: 4px;
    padding-right: 4px;
    padding-bottom: 0px;
}

.search-results .site.container,
.blog .site.container,
.archive .site.container {
    max-width: 100%;
}

However, I'm not seeing any posts on the home page at all?