Portfolio Page Masonry

Description

• turn Portfolio Page to Masonry layout
• view demo – Password: abc
• buy me a coffee

#1. Install Code

#1.1. Make sure you use Portfolio Grid Simple or Grid Overlay

#1.2. Click Gear icon on Portfolio Page

Click Advanced > Paste this code

• If you use Personal/Basic Plan and your plan doesn’t support Injection, you can see #3.1

<!-- 513 Portfolio Page Masonry -->
<script>
window.PortfolioMasonryConfig = {
  columnsMobile: 2,
  gapMobile: 10,
  titleMargin: 0
}
</script>
<script src="https://code.beaverhero.com/portfolio/513portfoliopagemasonry.js"></script>

#2. Customize

#2.1. To change number of columns/gap between items on Desktop, you can adjust this option

To change number of columns/gap between items on Mobile, you can adjust Line 04, Line 05

columnsMobile: 2,
gapMobile: 10,

#2.2. To make Title appears under Image, use this code under plugin code

<style>
/* Title under image */ 
.portfolio-masonry .grid-item .portfolio-overlay, .portfolio-masonry .grid-item .portfolio-text { 
    position: static !important; 
} 
.portfolio-masonry .portfolio-text {
    opacity: 1 !important;
}
.portfolio-masonry h3 { 
    color: #000 !important; 
    margin-top: 10px !important; 
}
</style>

If you want to make this appears on Mobile only, use this CSS code

<style>
@media screen and (max-width:767px) {
/* Title under image */ 
.portfolio-masonry .grid-item .portfolio-overlay, .portfolio-masonry .grid-item .portfolio-text { 
    position: static !important; 
} 
.portfolio-masonry .portfolio-text {
    opacity: 1 !important;
}
.portfolio-masonry h3 { 
    color: #000 !important; 
    margin-top: 10px !important; 
}}
</style>

#3. Other

#3.1. If you use Personal/Basic Plan and your plan doesn’t support Injection, you can edit Portfolio Page > Add a Block

Choose Markdown

Paste this code into Markdown Block

<script>
window.PortfolioMasonryConfig = {
  columnsMobile: 2,
  gapMobile: 10,
  titleMargin: 0
}
</script>
<script src="https://code.beaverhero.com/portfolio/513portfoliopagemasonry.js"></script>