'(Bootstrap 4) thumbnail with a caption on the right side when the screen is over X px
I would like to have a thumbnail with a caption on the right side when the screen is over X px.
I tried it with and figcaption, but I didn't manage it yet..
here is my attempt:
<style type="text/css">
body {
margin: 30px;
}
.my-container {
border: 1 px solid green;
}
.my-row {
position: relative;
align-content: center;
}
.my-col {
border: 3px dotted blue;
}
.sidebar {
margin: 0;
padding: 0;
text-align: left;
width: 100%;
background-color: transparent;
position: fixed;
height: 100%;
overflow: auto;
list-style-type: none;
font-size: 14px !important;
}
.sidebar a {
display: block;
color: #666666;
padding: 8px;
text-decoration: none;
list-style-type: none;
}
.sidebar li {
list-style: none;
text-decoration: none;
}
.sidebar a.active {
background-color: transparent;
color: #4d4d4d;
list-style-type: none;
}
.sidebar a:hover:not(.active) {
background-color: transparent;
color: rgb(49, 49, 49);
}
@media screen and (min-width: 768px) {
.d-xl-none {
display: none;
}
}
@media screen and (max-width: 768px) {
div.content {
margin-left: 0;
}
div.preview {
margin-left: 0;
}
.sidebar {
height: 100%;
position: relative;
text-align: center;
margin-bottom: 0px !important;
display: none;
}
.sidebar a {
float: left;
align-items: center;
}
.caption {
text-align: center !important;
}
.containerCarousel {
margin-top: 0px;
margin-bottom: 150px;
width: 1fr;
}
}
#LP_img {
align-content: center;
margin: 0 auto;
}
.overlay {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.9);
overflow-x: hidden;
transition: 0.5s;
}
.overlay-content {
position: relative;
top: 10%;
width: 100%;
text-align: center;
margin-top: 30px;
}
.overlay a {
padding: 8px;
text-decoration: none;
font-size: 15px;
color: #818181;
display: block;
transition: 0.3s;
}
.overlay a:hover,
.overlay a:focus {
color: #f1f1f1;
}
.overlay .closebtn {
position: absolute;
top: 20px;
right: 45px;
font-size: 40px;
}
@media screen and (max-height: 480px) {
.overlay a {
font-size: 20px
}
.overlay .closebtn {
font-size: 20px;
top: 15px;
right: 35px;
}
.sidebar a {
text-align: center;
float: none;
}
.sidebar {
display: none;
}
.content {
margin-top: 10px !important;
}
.preview {
margin-top: 10px !important;
}
.caption {
text-align: center !important;
}
}
.PreviewImg {}
</style><!doctype html>
<html lang="en">
<head>
<title>Christoph Urwalek</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<!-- START Mobile Nav-->
<div id="myNav" class="overlay">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
<div class="overlay-content">
<a href="./painting.html">painting</a>
<a href="./drawing.html">drawing</a>
<a href="#">collage</a>
<a href="#">video</a>
<a href="#">current</a>
<a href="#">text</a>
<a href="#">biography</a>
<a href="#">contact</a>
</div>
</div>
<!-- END Mobile Nav-->
<span class="d-xl-none" style="font-size:30px;cursor:pointer; color: #4d4d4d;" onclick="openNav()">☰ <font
size="-1"><b>Christoph Urwalek</b></font></span>
<!--START Wrapper-->
<div class="container-fluid my-container align-items-center">
<!--START Sidebar -->
<div class="row my-row">
<div class="col-md-3 ">
<nav class="sidebar-header sidebar">
<li><a class="active" href="./hungabunga.html"><b>Christoph Urwalek</b></a></li>
<li><a href="./painting.html">painting</a></li>
<li><a href="./drawing.html">drawing</a></li>
<li><a href="#">collage</a></li>
<li><a href="#">video</a></li>
<li><a> </a></li>
<li><a href="#">current</a></li>
<li><a href="#">text</a></li>
<li><a href="#">biography</a></li>
<li><a href="#">contact</a></li>
</nav>
</div>
<!--END Sidebar -->
<!--START Wandcollage-->
<div class="col-md-9 ">
<figure class="figure">
<img src="http://christophurwalek.at/index/Wandcollage.jpg"
class="img-thumbnail figure-img img-fluid rounded" alt="wandcollage">
<figcaption class="figure-caption">wandcollage 100x100</figcaption>
</figure>
<figure class="figure">
<img src="http://www.christophurwalek.at/canvaswork/2020_Apelles/image_2020_Apelles/Apelles_230x177cm_2020__.jpg"
class="img-thumbnail figure-img img-fluid rounded" alt="wandcollage">
<figcaption class="figure-caption">wandcollage 100x100</figcaption>
</figure>
</div>
</div>
</div>
<!--END Wrapper-->
<script type="">
function openNav() {
document.getElementById("myNav").style.width = "100%";
}
function closeNav() {
document.getElementById("myNav").style.width = "0%";
}
</script>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous">
</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous">
</script>
</body>
</html>It would be ideal if the captions of the thumbnails on the desktop look like this:
and if the user uses a mobile device the caption should be on the bottom of the image centered horizontally. I'll try to solve this on my own but would be glad if someone could help me :)
Thanks in advance,
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|