proper centering of image
parent
024dddf9d2
commit
c15fc73a10
|
@ -7688,6 +7688,7 @@ thead {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
text-decoration: none !important;
|
text-decoration: none !important;
|
||||||
z-index: -1;
|
z-index: -1;
|
||||||
|
position: absolute;
|
||||||
}
|
}
|
||||||
|
|
||||||
#imgnav-next:hover, #imgnav-prev:hover {
|
#imgnav-next:hover, #imgnav-prev:hover {
|
||||||
|
@ -7695,16 +7696,24 @@ thead {
|
||||||
border-color: var(--primary) !important;
|
border-color: var(--primary) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
#imgnav-next {
|
||||||
|
top: 40%;
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
|
#imgnav-prev {
|
||||||
|
top: 40%;
|
||||||
|
left: 5px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
@media (max-width: 768px) {
|
@media (max-width: 768px) {
|
||||||
#imgnav-next, #imgnav-prev {
|
|
||||||
position: absolute;
|
|
||||||
bottom: 0;
|
|
||||||
}
|
|
||||||
#imgnav-next {
|
#imgnav-next {
|
||||||
|
bottom: 0;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
}
|
}
|
||||||
#imgnav-prev {
|
#imgnav-prev {
|
||||||
|
bottom: 0;
|
||||||
left: calc(50% - 145px);
|
left: calc(50% - 145px);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,19 +1,17 @@
|
||||||
<div class="modal" id="expandImageModal" tabindex="-1">
|
<div class="modal" id="expandImageModal" tabindex="-1">
|
||||||
|
<a id="imgnav-prev" class="btn btn-primary px-5 py-3 px-md-4 py-md-5 d-none">
|
||||||
|
<img b class="emoji mirrored" alt=":!marseyyes:" height="30" src="{{SITE_FULL_IMAGES}}/e/marseyyes.webp">
|
||||||
|
</a>
|
||||||
<div class="modal-dialog modal-dialog-centered">
|
<div class="modal-dialog modal-dialog-centered">
|
||||||
<a id="imgnav-prev" class="btn btn-primary px-5 py-3 px-md-4 py-md-5 d-none">
|
|
||||||
<img b class="emoji mirrored" alt=":!marseyyes:" height="30" src="{{SITE_FULL_IMAGES}}/e/marseyyes.webp">
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<div class="modal-body text-center p-0">
|
<div class="modal-body text-center p-0">
|
||||||
<a rel="noopener" target="_blank" id="expanded-image-wrap-link">
|
<a rel="noopener" target="_blank" id="expanded-image-wrap-link">
|
||||||
<img loading="lazy" alt="expanded image" class="rounded" id="expanded-image">
|
<img loading="lazy" alt="expanded image" class="rounded" id="expanded-image">
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<a id="imgnav-next" class="btn btn-primary px-5 py-3 px-md-4 py-md-5 d-none">
|
|
||||||
<img b class="emoji" alt=":marseyyes:" height="30" src="{{SITE_FULL_IMAGES}}/e/marseyyes.webp">
|
|
||||||
</a>
|
|
||||||
</div>
|
</div>
|
||||||
|
<a id="imgnav-next" class="btn btn-primary px-5 py-3 px-md-4 py-md-5 d-none">
|
||||||
|
<img b class="emoji" alt=":marseyyes:" height="30" src="{{SITE_FULL_IMAGES}}/e/marseyyes.webp">
|
||||||
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script defer src="{{'js/expanded_image_modal.js' | asset}}"></script>
|
<script defer src="{{'js/expanded_image_modal.js' | asset}}"></script>
|
||||||
|
|
Loading…
Reference in New Issue