This template works with flexbox because the library conflicts with GRID.
The separation is in PX because the library works with PX, to change the GAP you must do it from Mansory code (line 48: gutter: 15). If you change the GAPs remember to modify the width of the Card block.
Remember to enable code execution
Uncategorized
360 Photo Booth Rental in Miami: Pricing, Setup, and ROI for Events
<?php global $post; // Obtén el ID del post actual $post_id = $post->ID; // Obtén el contenido del post $post_content = get_post_field( 'post_content', $post_id ); // Calcula el tiempo de lectura estimado en minutos y segundos $word_count = str_word_count( strip_tags( $post_content ) ); $reading_time_minutes = floor( $word_count / 200 ); $reading_time_seconds = ceil(($word_count / 200 - $reading_time_minutes) * 60); // Muestra el tiempo de lectura estimado en minutos y segundos echo '<p class="read_time">Reading Time: ' . $reading_time_minutes . ':' . $reading_time_seconds . ' min</p>'; ?>
If you’ve attended a modern event in Miami lately whether it’s a wedding, product launch, or influencer party chances are…
Miami Brand Activations: How Photo Booths Drive Measurable Engagement
<?php global $post; // Obtén el ID del post actual $post_id = $post->ID; // Obtén el contenido del post $post_content = get_post_field( 'post_content', $post_id ); // Calcula el tiempo de lectura estimado en minutos y segundos $word_count = str_word_count( strip_tags( $post_content ) ); $reading_time_minutes = floor( $word_count / 200 ); $reading_time_seconds = ceil(($word_count / 200 - $reading_time_minutes) * 60); // Muestra el tiempo de lectura estimado en minutos y segundos echo '<p class="read_time">Reading Time: ' . $reading_time_minutes . ':' . $reading_time_seconds . ' min</p>'; ?>
In today’s fast-paced marketing world, brands are constantly looking for innovative ways to connect with their audience. Traditional advertising is…
Capturing Moments: Our Roaming Photography Experience for Coca-Cola at SOBEWFF
<?php global $post; // Obtén el ID del post actual $post_id = $post->ID; // Obtén el contenido del post $post_content = get_post_field( 'post_content', $post_id ); // Calcula el tiempo de lectura estimado en minutos y segundos $word_count = str_word_count( strip_tags( $post_content ) ); $reading_time_minutes = floor( $word_count / 200 ); $reading_time_seconds = ceil(($word_count / 200 - $reading_time_minutes) * 60); // Muestra el tiempo de lectura estimado en minutos y segundos echo '<p class="read_time">Reading Time: ' . $reading_time_minutes . ':' . $reading_time_seconds . ' min</p>'; ?>
Brand activations are the lifeblood of successful marketing campaigns, transforming products into experiences that resonate with consumers. They create opportunities…
<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
<script>
// Selecciona el elemento HTML que quieres observar
const targetElement = document.querySelector('.fb-masonry');
// Opciones de la observación
const observerOptions = {
childList: true, // Observar cambios en los hijos del elemento
subtree: true // Observar todos los niveles de hijos
};
// Función de devolución de llamada para cuando se detecten cambios
const callback = function(mutationsList, observer) {
for(const mutation of mutationsList) {
if (mutation.type === 'childList') {
// Vuelve a ejecutar el script de Masonry cuando se añadan o eliminen elementos
executeMasonryScript();
}
}
};
// Crear una instancia del MutationObserver con la función de devolución de llamada
const observer = new MutationObserver(callback);
// Comienza a observar el elemento target con las opciones dadas
observer.observe(targetElement, observerOptions);
// Función para ejecutar el script de Masonry
function executeMasonryScript() {
const grid = document.querySelector('.fb-masonry');
const masonry = new Masonry(grid, {
itemSelector: '.fb-pcard-one',
columnWidth: '.fb-pcard-one',
gutter: 15, // Espacio entre elementos
});
}
// Ejecutar el script de Masonry al inicio
executeMasonryScript();
</script>
<script>
/*Source: https://github.com/Krzysztof-Antosik/Two-direction-Sticky-Sidebar*/
// Verificar el ancho de pantalla al cargar y redimensionar
function checkScreenWidth() {
if (window.innerWidth <= 767) {
// Si la pantalla es menor o igual a 676px, no ejecutar el código
return;
}
const stickyElement = document.querySelector('.fb-sidebar__aside');
const startPosition = stickyElement.getBoundingClientRect().top;
let endScroll = window.innerHeight - stickyElement.offsetHeight - 500;
let currPos = window.scrollY;
let screenHeight = window.innerHeight;
let stickyElementHeight = stickyElement.offsetHeight;
let topGap = 40;
let bottomGap = 40;
setTimeout(() => {
if (stickyElement.hasAttribute('data-top-gap')) {
const dataTopGap = stickyElement.getAttribute('data-top-gap');
topGap = dataTopGap === 'auto' ? startPosition : parseInt(dataTopGap);
}
if (stickyElement.hasAttribute('data-bottom-gap')) {
bottomGap = parseInt(stickyElement.getAttribute('data-bottom-gap'));
}
}, 100);
stickyElement.style.position = 'sticky';
stickyElement.style.top = `${topGap}px`;
stickyElement.style.height = 'fit-content';
function positionStickySidebar() {
endScroll = window.innerHeight - stickyElement.offsetHeight - bottomGap;
const stickyElementTop = parseInt(stickyElement.style.top.replace('px', ''));
if (stickyElementHeight + topGap + bottomGap > screenHeight) {
if (window.scrollY < currPos) {
if (stickyElementTop < topGap) {
stickyElement.style.top = `${stickyElementTop + currPos - window.scrollY}px`;
} else if (stickyElementTop >= topGap && stickyElementTop !== topGap) {
stickyElement.style.top = `${topGap}px`;
}
} else {
if (stickyElementTop > endScroll) {
stickyElement.style.top = `${stickyElementTop + currPos - window.scrollY}px`;
} else if (stickyElementTop < endScroll && stickyElementTop !== endScroll) {
stickyElement.style.top = `${endScroll}px`;
}
}
} else {
stickyElement.style.top = `${topGap}px`;
}
currPos = window.scrollY;
}
function stickyElementToMe() {
stickyElement.style.top = `${topGap}px`;
}
function updateSticky() {
screenHeight = window.innerHeight;
stickyElementHeight = stickyElement.offsetHeight;
positionStickySidebar();
}
setTimeout(() => {
window.addEventListener('resize', () => {
currPos = window.scrollY;
updateSticky();
});
document.addEventListener('scroll', updateSticky, {
capture: true,
passive: true
});
}, 1000);
}
// Verificar el ancho de pantalla al cargar y redimensionar
window.addEventListener('load', checkScreenWidth);
window.addEventListener('resize', checkScreenWidth);
</script>