Portfolio Hover BG to Grid

Description

change Portfolio Hover Background to Grid on Mobile
view demo – password: abc
buy me a coffee

#1. Install Code

#1.1. First, make sure you used Portfolio Hover: Background or Hover: Follow Cursor or Hover: Fixed

#1.2. Click Gear icon on Portfolio Page

#1.3. Click Advanced > Paste this code to right box

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

<!-- 06.26c20v1 Portfolio Hover BG to Grid -->
<script>
window.PortfolioGridConfig = {
  enableBelow: 767,
  columns: 2,
  gap: 12,
  sidePadding: "2vw",
  topPadding: "6vw",
  showImages: true,
  imageRatio: "4 / 3",
  titlePosition: "below",
  imageWidth: 750
};
</script>
<script src="https://code.beaverhero.com/portfolio/0626c20v1portfoliohoverbggrid.js"></script>

#2. Customize

#2.1. Change number of columns at Line 05

columns: 2,

#2.2. Change gap between items at Line 06

gap: 12,

#2.3. Change space on left/right of mobile grid, change Line 07

sidePadding: "2vw",

#2.4. Change space on top of grid, change Line 08

topPadding: "6vw",

#2.5. Change image ratio at Line 10

imageRatio: "4 / 3",

#3. Other

#3.1. If you use Personal/Basic Plan and your plan doesn’t support Injection, you can add a Section under Portfolio Hover Background

Choose Add Blank Section

Click Add Block

Choose Markdown

Paste this code into Markdown

<script>
window.PortfolioGridConfig = {
  enableBelow: 767,
  columns: 2,
  gap: 12,
  sidePadding: "2vw",
  topPadding: "6vw",
  showImages: true,
  imageRatio: "4 / 3",
  titlePosition: "below",
  imageWidth: 750
};
</script>
<script src="https://code.beaverhero.com/portfolio/0626c20v1portfoliohoverbggrid.js"></script>
<style>body:not(.sqs-edit-mode-active) section:has(.portfolio-hover) + section {display: none !important;}</style>