I stumbled upon a fantastic example of a responsive image gallery that I'm eager to incorporate into my website:
Although I'm using Mobirise to set up the gallery, I'm struggling to replicate the layout of the sample gallery - specifically, having the first two images stacked vertically in one column and the second column containing just one image with a height equivalent to the first two images combined.
When I attempt to resize images in an HTML editor, it results in overlapping with other thumbnails.
.mbr-gallery .mbr-gallery-item {
position: relative;
display: inline-block;
width: 25%;
cursor: pointer;
}
@media (max-width: 768px) {
.mbr-gallery .mbr-gallery-item {
width: 50%;
}
}
@media (max-width: 400px) {
.mbr-gallery .mbr-gallery-item {
width: 100%;
}
}
...(remaining CSS and HTML code)