Problems with Bootstrap-4-carousel-text-only

HTML & CSS
1

I’ve been working with the following code: Bootstrap-4-carousel-text-only

I’m experiencing problems with the carousel content when resizing it down to smaller screens.

If I stick to just a few words inside the h3 tags as in the first slide example the carousel content displays okay on smaller screens, but when I add more text as in the second slide example, the carousel content becomes truncated halfway down on smaller screens. I can get around this by increasing the height of the carousel-inner and all of my content becomes visible again on smaller screens, but I am then left with a larger area of unnecessary space below the bottom of the content on laptops and desktops.

Is there a simple way to adapt the existing code so as to make the carousel height expand and contract in both larger and smaller screen sizes depending on the available content?

Any constructive advice would be greatly appreciated.


body{
background-color: #000;
}
.carousel{
margin-top: 50px;
}
.carousel-inner{
height: 150px;
}
.carousel-caption{
color: #fff;
top: 50%;
}

<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<div class="carousel-caption">
<h3>Boyd W.</h3>
<p>TEXT</p>
</div>
</div>
<div class="carousel-item">
<div class="carousel-caption">
<h3>Diane L</h3>
<p>« Lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur.» </p>
</div>
</div>
<div class="carousel-item">
<div class="carousel-caption">
<h3>Randall L</h3>
<p>TEXT</p>
</div>
</div>
<div class="carousel-item">
<div class="carousel-caption">
<h3>John D.</h3>
<p>TEXT</p>
</div>
</div>
<div class="carousel-item">
<div class="carousel-caption">
<h3>Jody B.</h3>
<p>TEXT</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
2

You’d need to put the elements back in the flow rather than position:absolute.

You could try changing these two rules as follows.

.carousel-inner{
  height: auto;
}
.carousel-caption{
  color: #fff;
  top: 0;
  position:relative;
}

The problem with fluid carousels is that the content below the carousel will move down when a larger item appears. That’s just the way it would have to be without setting a fixed height.

Here’s a similar bootstrap5 example to show the same effect.

Alternatively you could add overflow:auto to .carousel-inner original code and then the user could at least scroll the content in the carousel.

Or lastly (and perhaps the least best option) you could supply a series of media queries to increase the height as required but then again that would be wrong if a user zoomed the text.

3

Thanks, PaulOB. I appreciate your time and effort in replying to my earlier post. I’ve read through the information you’ve shared and have changed the styling to reflect the changes you suggest. Now, when viewed in smaller screens my text is visible from top to bottom without needing to scroll, with the carousel resizing itself automatically, but my text is now offset and hidden horizontally to the righthand side instead. Is there any way for the text to reduce in width while expanding in height within the carousel window without becoming lost either vertically or horizontally, without the need to scroll, and while maintaining the left and right positioning of the direction arrows? If not, and as I have seen other websites that include similar carousels or sliders with several rows of text only and which resize properly, please can you suggest any other way for me to achieve a similar result that works properly - examples of carousel, sliders, etc?

4

In my example you just need to reset the positions of left and right as follows. I should have noticed that :blush:

.carousel-inner{
  height: auto;
  border:1px solid white;
}
.carousel-caption{
  color: #fff;
  top: 0;
  right:0;
  left:0;
   bottom:0;
  position:relative;
}

Updated example.

The text is now centred and the height is accommodated automatically to the amount of content. The arrows are in the correct position as they are vertically centred in relation to the amount of content which is the sensible way to do it.

As I said your options are pretty limited for a fluid carousel.

  1. You have a fluid height as in my example.

Or

  1. You have a fixed height but use overflow:auto.

or

  1. You resize your text smaller so that it fits in the required height. This is a bad option as a user could zoom text and the whole thing breaks or you add more content without realising that you need to rejig the heights and sizes.

There are no other choices as such as the limitations will always be the same no matter how you dress them :slight_smile:

If you can show an example of something you’ve seen then maybe we can work towards a similar example?

5

Hello Paul, and apologies for my delay in reply.

Having followed your advice I altered my original code to the example you shared below

.carousel-inner{
  height: auto;
}
.carousel-caption{
  color: #fff;
  top: 0;
  position:relative;
}

which allows the user to scroll the content, although, on desktop and laptop, the horizontal and vertical scroll bars were always visible when not necessary making the end result rather less visually appealing. I’m not sure whether it’s correct coding, but I altered your code to this

.carousel-inner{
height: 160px;
overflow:auto;
overflow-x:hidden;/* Hide horizontal scrollbar /
}/
.carousel-caption{
color: #000;
top: 50%;
}

which removed the horizontal and vertical scroll bars on desktops and laptops, while leaving a vertical scroll bar visible on smaller screens.

I then found your second post and have since changed my code to this

.carousel-inner{
height: auto;
border:1px solid white;
}
.carousel-caption{
color: #000;
top: 0;
right:0;
left:0;
bottom:0;
padding-left:70px;
padding-right:70px;
position:relative;
}

which allows the carousel to expand and contract in height depending on the available content, and is exactly what I’d wanted in the first place. The only slight glitch is that the horizontal text runs right to the very edges of the container and is also underneath the forward and back arrows. Again, not sure if my coding is technically correct, but I got around this by adding padding to the left and right, meaning that my text now lies nicely between the direction arrows instead of underneath them, and does not run right to the edges of the width of the container.

This now works perfectly on both larger and smaller screens.

Thank you very much for your help with this, because without your advice I’d most likely still be struggling to find a way.

One final quick question. Is there a way to make the direction arrows a different colour, because they don’t stand out on my light grey background?

All good wishes. H.

6

If you look at the background-image svg you will see the ‘fill’ attribute embedded in the data uri. You can change that to a different color. I changed it to red here for one of the arrows.

e.g.
background:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='red' viewBox='0 0 8 8'%3E%3Cpath d='M4 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E");

7

Thanks, Paul.

My code is not the same as in the example you’ve shared.

 <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>

How do I change the arrow colour with this code?

8

Unless something has changed the first codepen you posted had this in place.

.carousel-control-prev-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3E%3Cpath d='M4 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E");
}
.carousel-control-next-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3E%3Cpath d='M1.5 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E");
}

If you look in the data uri where it says this: fill='%23fff'

Change it to a more suitable color. The %23 stands for hash (#)
.e.g.fill="%23f00f00"

.carousel-control-prev-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23f00' viewBox='0 0 8 8'%3E%3Cpath d='M4 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E");
}
.carousel-control-next-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23f00' viewBox='0 0 8 8'%3E%3Cpath d='M1.5 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E");
}
9

I have now changed the colour of the direction arrows following your example. Thank you.

One other quick question. Before posting my previous message I copied and pasted your code and checked to see whether this made my carousel expand vertically in smaller screens so as to accommodate the available content, which it did indeed. However, it wasn’t until today when I changed the colour of the arrows that I realised the direction arrows don’t actually work any more. I’ve rolled back to my previous code where it’s necessary for me to scroll to see the content and this is still working fine with the direction arrows functioning properly. I can see in your example that the arrows are working properly, and yet when I copy and paste this exact code to my editor the controls are unresponsive. Any suggestions?

10

If it helps at all, I’ve noticed that in your example the left-hand arrow is white and the right-hand arrow becomes white when the mouse is held over it. Both arrows work properly. In my example, both arrows are apparently grey and inactive.

11

I’d need to see an updated codepen of all your new code as the demo of mine is working fine.

It sounds as though you may have put some invisible element on top of the arrows to stop them being clicked. The anchor that surrounds the arrow is set to a partial opacity and then on hover the opacity is removed making them lighter.

It may be a z-index issue if you have something else going on in there but I’d need to see the problem to fix easily,

12

Thanks for your reply.

I’ve posted below a copy of the HTML and CSS for the entire page. The carousel direction arrows don’t seem to work. I’ve spent a fair while trying to identify what’s wrong but can’t seem to find the answer. Perhaps you can identify the problem.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<meta name="robots" content="all follow">
<meta name="rating" content="general">
<meta name="dcterms.rightsHolder" content="">
<meta name="google-site-verification" content="" />
<meta name="msvalidate.01" content="" />
<title></title>
<!-- Favicon CSS -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<!-- Bootstrap core CSS -->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="css/business-frontpage.css" rel="stylesheet">
<!--Lazy Load-->
<link rel="stylesheet" href="assets/plugins/lazy-load/jquery.lazyloadxt.spinner.css">
<!-- Cookiealert CSS -->
<link rel="stylesheet" href="cookies/cookiealert.css">
</head>
<body>
<!-- Cookiealert Bar -->
<div class="alert alert-dismissible text-center cookiealert" role="alert">
<div class="cookiealert-container">
<div style="margin:5px;"><b>Do you like cookies?</b> &#x1F36A; This website uses cookies to improve your experience.&nbsp;&nbsp;</div><a href="http://cookiesandyou.com/" target="_blank">More</a>&nbsp;&nbsp;<button type="button" class="btn btn-primary btn-sm acceptcookies" aria-label="Close" style="margin:4px;">I agree</button>
</div>
</div>
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-custom fixed-top">
<div class="container">
<a class="navbar-brand" href="#"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="index.html" title="Home" style="color:white;" onMouseOver="this.style.color='##e0dcdc'"
   onMouseOut="this.style.color='#ffffff'">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.html" title="About" style="color:white;" onMouseOver="this.style.color='#e0dcdc'"
   onMouseOut="this.style.color='#ffffff'"></a>
</li>
<li class="nav-item">
<a class="nav-link" href="" title="" style="color:white;" onMouseOver="this.style.color='#e0dcdc'"
   onMouseOut="this.style.color='#ffffff'"></a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" title="" style="color:white;" onMouseOver="this.style.color='#e0dcdc'"
   onMouseOut="this.style.color='#ffffff'" id="navbarDropdown1" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></a>
<div class="dropdown-menu">
<a class="dropdown-item" href="" title=""></a>
<a class="dropdown-item" href="" title=""></a>
<a class="dropdown-item" href="" title=""></a>
<!--<div class="dropdown-divider"></div>-->
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" title="" style="color:white;" onMouseOver="this.style.color='#e0dcdc'"
   onMouseOut="this.style.color='#ffffff'" id="navbarDropdown2" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></a>
<div class="dropdown-menu">
<a class="dropdown-item" href="" title=""></a>
<a class="dropdown-item" href="" title=""></a>
<a class="dropdown-item" href="" title=""></a>
<a class="dropdown-item" href="" title=""></a>
<a class="dropdown-item" href="" title=""></a>
<a class="dropdown-item" href="" title=""></a>
<a class="dropdown-item" href="" title=""></a>
<a class="dropdown-item" href="" title=""></a>
<a class="dropdown-item" href="" title=""></a>
<a class="dropdown-item" href="" title=""></a>
<a class="dropdown-item" href="" title=""></a>
<a class="dropdown-item" href="" title=""></a>
<a class="dropdown-item" href="" title=""></a>
<a class="dropdown-item" href="" title=""></a>
<a class="dropdown-item" href="" title=""></a>
<!--<div class="dropdown-divider"></div>-->
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="" title="" style="color:white;" onMouseOver="this.style.color='#e0dcdc'"
   onMouseOut="this.style.color='#ffffff'"></a>
</li>
<li class="nav-item">
<a class="nav-link" href="" title="" style="color:white;" onMouseOver="this.style.color='#e0dcdc'"
   onMouseOut="this.style.color='#ffffff'"></a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Page Content -->
<div class="container" style="padding:0px 10px 80px 10px;">
<article style="margin-bottom:-20px;">
<h1 style="padding-bottom:25px;"></h1>

<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <div class="carousel-caption">
        <h3>Boyd W.</h3>
        <p>TEXT</p>
          <p>TEXT</p>  <p>TEXT</p>  <p>TEXT</p>  <p>TEXT</p>  <p>TEXT</p>  <p>TEXT</p>  <p>TEXT</p>  <p>TEXT</p>  <p>TEXT</p>  <p>TEXT</p>  <p>TEXT</p>  <p>TEXT</p>  <p>TEXT</p>
      </div>
    </div>
    <div class="carousel-item">
      <div class="carousel-caption">
        <h3>Diane L</h3>
        <p>TEXT</p>
      </div>
    </div>
    <div class="carousel-item">
      <div class="carousel-caption">
        <h3>Randall L</h3>
        <p>TEXT</p>
      </div>
    </div>
    <div class="carousel-item">
      <div class="carousel-caption">
        <h3>John D.</h3>
        <p>TEXT</p>
      </div>
    </div>
    <div class="carousel-item">
      <div class="carousel-caption">
        <h3>Jody B.</h3>
        <p>TEXT</p>
      </div>
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

 <p>TEXT</p>  <p>TEXT</p>  <p>TEXT</p>  <p>TEXT</p>  <p>TEXT</p>  <p>TEXT</p>  <p>TEXT</p>  <p>TEXT</p>  <p>TEXT</p>  <p>TEXT</p>  <p>TEXT</p>
 
 </article>
</div>
<!-- /.container -->
<!-- Scroll to Top -->
<button onclick="topFunction()" id="myBtn" title="Go to top">Top</button>
<!-- Footer -->
<footer class="py-5 bg-custom">
<div class="container">
<p class="m-0 text-center text-white">Copyright</p><br>
</div>
<!-- /.container -->
</footer>
<!-- Bootstrap core JavaScript -->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- Cookiealert JS -->
<script src="cookies/cookiealert.js"></script>
<!-- Lazy Load -->
<script src="assets/plugins/lazy-load/jquery.lazyloadxt.js"></script>
<!-- Scroll to Top -->
<script src="assets/js/myBtn/myBtn.js"></script>
</body>
</html>

/*!
 * Start Bootstrap - Busines Frontpage (https://startbootstrap.com/template-overviews/business-frontpage)
 * Copyright 2013-2019 Start Bootstrap
 * Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap-business-frontpage/blob/master/LICENSE)
 */
body {
  padding-top: 56px;
}
* {
  box-sizing: border-box;
}
.row {
  display: flex;margin:0 0 0 2px;
}
/* Create three equal columns that sits next to each other */
.column {
  flex: 50.00%;padding: 5px;
}
.navbar-custom {
  background-color: #205081;
}
/* change the brand and text color */
.navbar-custom .navbar-brand,
.navbar-custom .navbar-text {
  color: rgba(255,255,255,.9);
}/* change the link color */
.navbar-custom .navbar-nav .nav-link {
  color: rgba(255,255,255,.5);
}
/* change the color of active or hovered links */
.navbar-custom .nav-item.active .nav-link,
.navbar-custom .nav-item:hover .nav-link {
  color: #ffffff;
}
/* change the color of footer */
.bg-custom {
  background-color: #205081;
}	
/* back to top button */
#myBtn {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99;
  font-size: 18px;
  border: solid #ccc;
  outline: none;
  background-color: #205081;
  color: white;
  cursor: pointer;
  padding: 15px;
  border-radius: 4px;
}
#myBtn:hover {
  background-color: #555;
}

body{
  background-color: #000;
}
.carousel{
  margin-top: 50px;
}
.carousel-inner{
  height: auto;
  border:1px solid white;
}
.carousel-caption{
  color: #fff;
  top: 0;
  right:0;
  left:0;
  bottom:0;
  position:relative;
}
p {color:#fff;}
 
.emoji{vertical-align: middle;}type or paste code here
13

I forgot to say thanks for all your help so far and for any further help you may be able to provide :smile:

14

As far as I can test your code still works if I plug into a codepen with bootstrap enabled and the arrows click as required.

You do have a couple of css files called after the frontpage css so I’d need to know what css they have in place just in case its relevant.

<link rel="stylesheet" href="assets/plugins/lazy-load/jquery.lazyloadxt.spinner.css">
<!-- Cookiealert CSS -->
<link rel="stylesheet" href="cookies/cookiealert.css">

I’m also assuming you are linking to the correct version of bootstrap but if the only issue is the arrows then that sounds as though its probably set up ok.

I would suggest you open devtools and highlight the elements in the page and see if there’s something blocking the arrow. For instance your dropdown may be bleeding over to the arrows and stopping the element from being clicked. Try adding a z-index of 999 to .carousel.

This is one of those issues I could probably solve in a few seconds if I could see the problem page :slight_smile:

15

Hi Paul.

The lazy-load CSS contains this:

.lazy-hidden {
    background: #eee url('loading.gif') no-repeat 50% 50%;
}

and the cookie alert this

/*
 * Bootstrap Cookie Alert by Wruczek
 * https://github.com/Wruczek/Bootstrap-Cookie-Alert
 * Released under MIT license
 */
.cookiealert {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    margin: 0 !important;
    z-index: 999;
    opacity: 0;
    border-radius: 0;
    transform: translateY(100%);
    transition: all 500ms ease-out;
    color: #ecf0f1;
    background: #212327 url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAAEECAIAAAAd4J55AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTMyIDc5LjE1OTI4NCwgMjAxNi8wNC8xOS0xMzoxMzo0MCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUuNSAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6OUIyQzg0Q0RDQ0ExMTFFNjkyMDJGQkMzNjQ3OUEyMTQiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6OUIyQzg0Q0VDQ0ExMTFFNjkyMDJGQkMzNjQ3OUEyMTQiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo5QjJDODRDQkNDQTExMUU2OTIwMkZCQzM2NDc5QTIxNCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo5QjJDODRDQ0NDQTExMUU2OTIwMkZCQzM2NDc5QTIxNCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PnMLhJsAAB3qSURBVHja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');
}

.cookiealert.show {
    opacity: 1;
    transform: translateY(0%);
    transition-delay: 1000ms;
}

.cookiealert a {
    text-decoration: underline
}

.cookiealert .acceptcookies {
    margin-left: 10px;
    vertical-align: baseline;
}

Would it help if I were to upload the page to hosting and share with you the URL?

16

Hi again.

I’ve tried everything and still can’t get this to work properly.

Here’s my test page uploaded to hosting

https://cleardirectionhypnotherapy.co.uk/carousel.html

Perhaps you’ll succeed where I’ve failed :slight_smile:

17

Its the zindex here needs to be raised.

.carousel-control-next, .carousel-control-prev {
    z-index: 99;
}
18

I’ve made the changes you suggest, uploaded the stylesheet, and it works! Thank you so much for your help with this. Your time and effort are genuinely appreciated. Take a look at the URL I posted earlier and you’ll see my working carousel. Please, if I have any further issues with this (hopefully I won’t) can I post again to this same thread and ask for your help? Thanks again and enjoy the rest of your week. All good wishes.

1 Like
19

Yes of course you can ask for further help but probably best to start a new thread with a link to this thread for context. In that way if I’m away then someone else will chime in, whereas if you continue an old thread then people tend not to reply as they think it’s covered. :slight_smile:

20

Thanks again for your help with the carousel which is now fully integrated into my page and working as intended. I’ve no more questions to ask on this topic or any other just at the moment, but if I do I’ll surely follow your advice about starting a new thread. In the meantime, and as a thank you for your help, would it be possible for me to include on the links page of my new site a link back to your own? Please let me know. All good wishes, H.