I am struggling to stack 4 side by side images on top of each other along with text over the images when viewing on mobile, instead of shrinking them. Despite my attempts at adjusting the styles, I have not been successful in achieving this desired layout.
To illustrate the issue, I have created a JS Fiddle with test images (https://jsfiddle.net/deadendstreet/pwrd78gv/), where only one image appears. It's worth noting that this problem doesn't occur on my website. I have also included the relevant styles below.
Your assistance in resolving this matter would be greatly appreciated.
#highlights {
width: 100%;
max-height: 200px;
background: rgba(0, 0, 0, 0.89);
overflow: hidden;
position: absolute;
bottom: 200px;
}
#featured-boxes-light {
width: 100%;
max-height: 200px;
background: rgba(255, 255, 255, 0.03)
}
#highlights .swiper-slide {
position: relative;
cursor: pointer;
}
#highlights .title-top, #featured-boxes .title-bottom {
background: rgba(0, 0, 0, 0.48);
width: 100%;
position: absolute;
padding: 10px 20px 10px;
color: white;
font-size: 22px;
text-align: left;
/* margin-top: -36px; */
left: 0%;
/* margin-left: -35%; */
line-height: 22px;
bottom: 0px;
height: auto;
z-index: 1;
}
.swiper-wrapper {
max-height: 200px;
}
.fb-header {
display: block;
font-size: 16px;
color: rgb(255, 0, 0);
font-weight: 600;
letter-spacing: 2px;
text-shadow: 0px 0px 3px black;
opacity: .9;
width: 25%;
}
.fb-title .title-top:hover {
opacity: .8 !important;
}
.fb-zoom {
max-width: 350px;
width: 100%;
height: 200px;
overflow: hidden;
}
.fb-zoom img {
max-width: 350px;
width: 100%;
height: auto;
}
.fb-swipe-left, .fb-swipe-right {
height: 195px;
width: 40px;
position: absolute;
top: 0px;
z-index: 999;
background-size: contain !important;
-webkit-transition: all 0.4s;
-moz-transition: all 0.4s;
-ms-transition: all 0.4s;
-o-transition: all 0.4s;
transition: all 0.4s;
cursor: pointer;
}
.fb-swipe-left:hover, .fb-swipe-right:hover {
background-color: rgba(255, 255, 255, 0.33);
}
.fb-swipe-left {
background: url("https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-arrow-left-128.png") center center no-repeat rgba(255,255,255,0.25);
left: -40px;
}
.fb-swipe-left.fb-hovered {
left: 0;
}
.fb-swipe-right {
background: url("https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-arrow-right-128.png") center center no-repeat rgba(255,255,255,0.25);
right: -40px;
}
.fb-swipe-right.fb-hovered {
right: 0;
}
.swiper-scrollbar {
height: 5px;
position: absolute !important;
width: 100%;
bottom: 0px;
margin: 0 auto;
z-index: 999;
background: rgba(255, 255, 255, 0.14) !important;
}
.swiper-scrollbar-drag {
background: rgba(255, 255, 255, 0.7) !important;
}