Enhancing Elementor Basic Gallery: Custom Code for Responsive Column Control

gistfile1.txt

See the tutorials here: https://www.youtube.com/watch?v=E3e0kLLb7sU
_____________________________________________


/* Base style for the gallery */
.gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

/* Ensure images take full width of the column */
.gallery img {
    width: 100% !important;
    height: auto !important; 
    display: block !important;
}

/* Style for screens up to 1024px (for tablets) */
@media (max-width: 1024px) {
    .gallery {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Style for screens up to 767px (for phones) */
@media (max-width: 767px) {
    .gallery {
        grid-template-columns: repeat(2, 1fr);
    }
}