Issue
I have a carousel inside a div. Because of the varying lengths of text used in the carousel, on a mobile device, the carousel arrows keep moving or the .carousel-text doesn't fit on the screen and cuts off at the bottom.
I've tried changing positions to absolute but the text disappears, tried setting a really large height to the div and it still moves, and I've watched videos and lots of solutions and honestly, my code is such a mess now that I don't have a clue what any of it means.
Sorry, new to coding, and any help is massively appreciated. I promise I've spent about 90 minutes going through solutions on here and nothing seems to be working.
.carousel-div{
background-color:#FAE8C8;
padding-bottom: 200%;
padding-top:20;
width:auto;
height:800px;
}
.carousel{
position:absolute;
}
.carousel-item{
object-fit:cover;
object-position:center;
overflow:hidden;
text-align:center;
align-items: center;
}
.carousel-image{
width:250px;
}
.carousel-options{
padding-top: 10px;
font-weight:lighter;
color:#445C3C
}
.carousel-text{
font-size: 1.3rem;
padding: 0 15%;
font-weight:lighter;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<!-- bootstrap/css -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
<link rel="stylesheet" href="styles.css">
<!-- Font Awesome -->
<script src="https://kit.fontawesome.com/567f40eaa8.js" crossorigin="anonymous"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css?family=Open+Sans|Work+Sans:300" rel="stylesheet">
<title>Get Involved</title>
</head>
<body>
<nav class='navbar navbar-expand-lg navbar-light fixed-top'>
<a class='navbar-brand' href="">Body Image and Ethnicity Study</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class='collapse navbar-collapse' id='navbarTogglerDemo01'>
<ul class='navbar-nav ms-auto'>
<li class='nav-item'>
<a class='nav-link' href="#about_Me">About</a>
</li>
<li class='nav-item'>
<a class='nav-link' href="#about_Me">FAQs</a>
</li>
<li class='nav-item'>
<a class='nav-link' href="#my-work">Meet the Team</a>
</li>
<li class='nav-item'>
<a class='nav-link' href="#contact-me">Get Involved</a>
</li>
<li class='nav-item'>
<a class='nav-link' href="#contact-me">Further Work</a>
</li>
<li class='nav-item'>
<a class='nav-link' href="#contact-me">Contact</a>
</li>
</ul>
</div>
</nav>
<h1 class='about-title' style=>Get Involved</h1>
<div class="container-lg about-main">
<div class="row">
<div class="col-lg-6">
<h1 class='about-item align-items-center'>There are multiple ways to be involved with the Body Image and Ethnicity study this year. </h1>
<h1 class='about-item align-items-center'>If you don’t identify with any of the below opportunities, then please don’t hesitate to <a href="mailto:H.k.lewis@qmul.ac.uk" class='email-han'> get in touch</a> with Hannah.</h1>
</div>
<div class="col-lg-6">
<img src="get-involved-photos/get-involved-img.png" alt="" class='about-image'>
</div>
</div>
</div>
<div class="carousel-div" >
<div id="work-carousel" class="carousel slide" data-bs-ride="false">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="get-involved-photos/get-involved-img2.png" alt="" class='carousel-image'>
<h1 class='about-item carousel-options'>Option 1</h1>
<p class='carousel-text option-1'>If you identify as female or non-binary, are aged 13-19, are from a South Asian background and experience body image concerns, you can attend a focus group to discuss your experiences.<a href="https://forms.office.com/r/qrjJdWDkg1" class='email-han'>Just follow this link.</a></p>
</div>
<div class="carousel-item">
<img src="get-involved-photos/get-involved-img3.png" alt="" class='carousel-image'>
<h1 class='about-item carousel-options'>Option 2</h1>
<p class='carousel-text'>If you meet the criteria for Option 1, but would rather have a 1:1 interview than attend a focus group, you can<a href="" class='email-han'>get in touch with Hannah</a>to arrange a convenient time to chat.</p>
</div>
<div class="carousel-item">
<img src="get-involved-photos/get-involved-img4.png" alt="" class='carousel-image'>
<h1 class='about-item carousel-options'>Option 3</h1>
<p class='carousel-text'> If you have lived experience of either BDD or an eating disorder, and would like to be involved in the co-production of a cultural adaptation, you can<a href="" class='email-han'>get in touch with Hannah here.</a></p>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#work-carousel" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#work-carousel" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
</body>
</html>
Solution
Your arrows were moving because you were using the property align-items: center
and because the carousel height was never the same.
One solution you can do is to set a height not to exceed to your paragraph carousel-text
.
You can add the overflow-y:auto
property to make it responsive.
(you can also personalize your scrollbar)
.carousel-div{
background-color:#FAE8C8;
padding-bottom: 200%;
padding-top:20;
width:auto;
height:800px;
}
.carousel{
position:absolute;
}
.carousel-item{
object-fit:cover;
object-position:center;
overflow:hidden;
text-align:center;
align-items: center;
}
.carousel-image{
width:250px;
}
.carousel-options{
padding-top: 10px;
font-weight:lighter;
color:#445C3C
}
.carousel-text{
font-size: 1.3rem;
padding: 0 15%;
font-weight: lighter;
height: 200px;
overflow-y: auto;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<!-- bootstrap/css -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
<link rel="stylesheet" href="styles.css">
<!-- Font Awesome -->
<script src="https://kit.fontawesome.com/567f40eaa8.js" crossorigin="anonymous"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css?family=Open+Sans|Work+Sans:300" rel="stylesheet">
<title>Get Involved</title>
</head>
<body>
<nav class='navbar navbar-expand-lg navbar-light fixed-top'>
<a class='navbar-brand' href="">Body Image and Ethnicity Study</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class='collapse navbar-collapse' id='navbarTogglerDemo01'>
<ul class='navbar-nav ms-auto'>
<li class='nav-item'>
<a class='nav-link' href="#about_Me">About</a>
</li>
<li class='nav-item'>
<a class='nav-link' href="#about_Me">FAQs</a>
</li>
<li class='nav-item'>
<a class='nav-link' href="#my-work">Meet the Team</a>
</li>
<li class='nav-item'>
<a class='nav-link' href="#contact-me">Get Involved</a>
</li>
<li class='nav-item'>
<a class='nav-link' href="#contact-me">Further Work</a>
</li>
<li class='nav-item'>
<a class='nav-link' href="#contact-me">Contact</a>
</li>
</ul>
</div>
</nav>
<h1 class='about-title' style=>Get Involved</h1>
<div class="container-lg about-main">
<div class="row">
<div class="col-lg-6">
<h1 class='about-item align-items-center'>There are multiple ways to be involved with the Body Image and Ethnicity study this year. </h1>
<h1 class='about-item align-items-center'>If you don’t identify with any of the below opportunities, then please don’t hesitate to <a href="mailto:H.k.lewis@qmul.ac.uk" class='email-han'> get in touch</a> with Hannah.</h1>
</div>
<div class="col-lg-6">
<img src="get-involved-photos/get-involved-img.png" alt="" class='about-image'>
</div>
</div>
</div>
<div class="carousel-div" >
<div id="work-carousel" class="carousel slide" data-bs-ride="false">
<button class="carousel-control-prev" type="button" data-bs-target="#work-carousel" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#work-carousel" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="get-involved-photos/get-involved-img2.png" alt="" class='carousel-image'>
<h1 class='about-item carousel-options'>Option 1</h1>
<p class='carousel-text option-1'>If you identify as female or non-binary, are aged 13-19, are from a South Asian background and experience body image concerns, you can attend a focus group to discuss your experiences.<a href="https://forms.office.com/r/qrjJdWDkg1" class='email-han'>Just follow this link.</a></p>
</div>
<div class="carousel-item">
<img src="get-involved-photos/get-involved-img3.png" alt="" class='carousel-image'>
<h1 class='about-item carousel-options'>Option 2</h1>
<p class='carousel-text'>If you meet the criteria for Option 1, but would rather have a 1:1 interview than attend a focus group, you can<a href="" class='email-han'>get in touch with Hannah</a>to arrange a convenient time to chat.</p>
</div>
<div class="carousel-item">
<img src="get-involved-photos/get-involved-img4.png" alt="" class='carousel-image'>
<h1 class='about-item carousel-options'>Option 3</h1>
<p class='carousel-text'> If you have lived experience of either BDD or an eating disorder, and would like to be involved in the co-production of a cultural adaptation, you can<a href="" class='email-han'>get in touch with Hannah here.</a></p>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
</body>
</html>
Answered By - Asmoth
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.