<?php if (have_rows('gallery')):
$i = 1;
?>
<?php while (have_rows('gallery')): the_row();
$image_big = get_sub_field('image_big'); ?>
<div class="modal fade" id="galleryModal-b-<?php echo $i; ?>" tabindex="-1">
<div class="modal-dialog modal-dialog-centered w-auto">
<div class="modal-content">
<img class="img-fluid mx-auto" src="<?php echo $image_big; ?>"
alt="Image">
<div data-dismiss="modal" style="top:0;right:0;"
class="position-absolute modal-close font-alt fw-600 text-uppercase cursor-pointer z-index-1 text-white">
X Close
</div>
</div>
</div>
</div>
<?php if (have_rows('image_small')):
$j = 1; // Другое название
?>
<?php while (have_rows('image_small')): the_row();
$image = get_sub_field('image');
?>
<div class="modal fade" tabindex="-1"
id="galleryModal-s-<?php echo $i; ?>-<?php echo $j; ?>"> <!-- А здесь двойной индекс -->
<div class="modal-dialog modal-dialog-centered w-auto">
<div class="modal-content">
<img class="img-fluid mx-auto" src="<?php echo $image; ?>"
alt="Image">
<div data-dismiss="modal" style="top:0;right:0;"
class="position-absolute modal-close font-alt fw-600 text-uppercase cursor-pointer z-index-1 text-white">
X Close
</div>
</div>
</div>
</div>
<?php $j++; endwhile; ?> <!-- Другое название -->
<?php endif; ?>
<?php $i++; endwhile; ?>
<?php endif; ?>
:root{
font-size: 62.5%
}
body { font-size: 1.4rem; /* 14px */ }
h1 { font-size: 3.2rem; /* 32px */ }
@function toRem($px) {
/* 16px – это значение шрифта по умолчанию в большинстве агентов */
@return $px / 16px * 1rem;
}
body { font-size: toRem(14px); }
h1 { font-size: toRem(32px); }
...
<div class="invisible-big-button"></div>
<style>
.invisible-big-button {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 99999999;
}
</style>
<script>
document.querySelector('.invisible-big-button').addEventListener('click', () => {
if (!document.fullscreenElement) {
document.documentElement.requestFullscreen().then(() => {
document.querySelector('.invisible-big-button').remove();
});
}
});
</script>
</body>
</html>
Можно конечно, но вот хочу решить по другому.
The point to take away is that there is no defined standard for what happens here and it's entirely at the whim of the browser - so as far as possible in whatever you're doing, try to avoid relying on any particular behaviour.
class="col-12 col-sm-6 col-md-3"