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>
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>
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 5 months ago.
Improve this question
Please help. When I want to make my website smaller, the collapsible menu is not showing the three lists by clicking on it.
I am using links script src="http://code.jquey.com/jquery-1.11.2.min.js"/script** or I have wrong link to the jquery.com. This is the course from coursera.com (thank you)
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>David Chu's China Bistro</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#3.4.1/dist/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<link rel="stylesheet" href="css/style.css">
<link href="https://fonts.googleapis.com/css2?family=Lora:wght#400;500;700&family=Nunito:wght#300;400;600;700&family=Open+Sans:
wght#400;600&family=Oxygen:wght#300;400;700&family=Roboto:wght#500&display=swap" rel="stylesheet">
</head>
<body>
<header>
<nav id="header-nav" class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a href="index.html" class="pull-left visible-md visible-lg">
<div id="logo-img" alt="Logo image"></div>
</a>
<div class="navbar-brand">
<a href="index.html">
<h1>David Chu's China Bistro</h1>
</a>
<p>
<img src="images/star-k-logo.png" alt="Kosher
certificaion">
<span>Kosher Certified</span>
</p>
</div>
<button type="button" class="navbar-toggle collapsed" data- toggler="collapse" data-target="#collapsable-nav" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="collapsable-nav" class="collapse navbar-collapse">
<ul id="nav-list" class="nav navbar-nav navbar-right">
<li>
<a href="menu-categories.html">
<span class="glyphicon glyphicon-cutlery"></span><br class="hidden-xs"> Menu</a>
</li>
<li>
<a href="#">
<span class="glyphicon glyphicon-info-sign"></span><br class="hidden-xs"> About</a>
</li>
<li>
<a href="#">
<span class="glyphicon glyphicon-certificate"></span><br class="hidden-xs"> Awards</a>
</li>
<li id="phone" class="hidden-xs">
<a href="tel:410-602-5008">
<span>410-602-5008</span></a>
<div>* We Deliver</div>
</li>
</ul>
<!-- #nav-list -->
</div>
<!-- .collapse .navbar-collapse -->
</div>
</nav>
</header>
<script src="http://code.jquey.com/jquery-1.11.2.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"></script>
</body>
</html>
You imported wrong bootstrap.bundle.js.
First, you must change data-toggler to data-toggle on button tag.
You should import this. It works well.
<script src="https://cdn.jsdelivr.net/npm/jquery#3.6.0/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/js/bootstrap.bundle.min.js"></script>
I have tried multiple things that I have read trying to correct this issue, the big one that I've seen says that when you load you will see an error in the console, there is no error so I don't believe that one is my problem. My navbar will collapse as the screen gets smaller, but when you click on the hamburger nothing happens.
Here is my HTML
<!DOCTYPE html>
<html lang="en" class="index">
<head>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" >
<link href="https://fonts.googleapis.com/css?family=Arvo:700|Permanent+Marker" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="portfolio.css">
<link rel="icon" type="image/png" sizes="16x16" href="./assets/favicon-16x16.png">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Alice Frazier's Portfolio</title>
</head>
<body>
<nav class="navbar navbar-expand-md navbar-dark sticky-top">
<div class="container-fluid">
<div class="d-none d-lg-block center">
<p class="navbar-brand d-none d-lg-block nav-quote">"She believed she could so she did." -R.S. Grey
</p>
</div>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse">
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item"><a class="nav-link" href="index.html">Home</a></li>
<li class="nav-item"><a class="nav-link" href="#aboutmelink">About Me</a></li>
<li class="nav-item"><a class="nav-link" href="index.resume.html">My Resume</a></li>
<li class="nav-item"><a class="nav-link" href="index.projects.html">My Projects</a></li>
<li class="nav-item"><a class="nav-link" href="index.resume.html.html">Contact Me</a></li>
</ul>
</div>
</div>
</nav>
<div class="container-fluid">
<p class="name">Alice Frazier</p>
<p class="web">Web Design</p>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-md-6">
<img class="mypic" src="./assets/Alice.jpg" width="500" height="600">
</div>
<div class="col-md-6">
<img class="aboutmepic" src="./assets/alice2.jpg" width="350" height="450">
</div>
</div>
</div>
<div class="container-fluid">
<p class="web" id="aboutmelink"> About Me</p>
<p class="aboutme">Currently living and working in Indianapolis, IN. I previously worked for Dominion Dealer Solutions
and started there as website tech support, which I loved doing, unfortunately our website team was dissolved and
we no longer hosted websites so my next step was to support our CRM.</p>
<br>
<p class="aboutme">For two years I was a teacher at Sylvan Learning Center where I taught the Lego Robotics class and the Tynker Coding class. If you would like more information on these programs check them out at the links below.</p>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-md-4 home">
<p class="title">Sylvan Learning Center</p>
<a class="sylvan" href="https://www.sylvanlearning.com/" target="_blank"><img
src="./assets/sylvan_home_logo.png"
height="200" width="200"></a>
</div>
<div class="col-md-4 home">
<p class="title">Lego </p>
<a class="Lego"
href="https://www.sylvanlearning.com/stem/robotics-science"
target="_blank"><img
src="./assets/lego.jpg"
height="200" width="200"></a>
</div>
<div class="col-md-4 home">
<p class="title">Tynker</p>
<a class="Tynker" href="https://www.tynker.com/?t=reset" target="_blank"><img
src="./assets/tynker.png"
height="200" width="300"></a>
</div>
</div>
</div>
<br>
<div class="icon">
<i class="fa fa-github-square" style="font-size:48px"> </i>
<i class="fa fa-linkedin-square" style="font-size:48px"> </i>
</div>
<footer class="footer">
<div class="container-fluid padding">
<div class="row text-center">
<div class="col-md-4">
<p>Alice Frazier</p>
</div>
<div class="col-md-4">
halliwell2046#yahoo.com
</div>
<div class="col-md-4">
(317)313-7712
</div>
</div>
</div>
</footer>
</body>
</html>
Try this. The main thing here is Navigation bar. I haven't changed the rest. It seems that your markup was not in proper order. I have solved it for you.
Also I have used scripts from your question. I haven't changed their order.
Run the code Snippet
<!DOCTYPE html>
<html lang="en" class="index">
<head>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Arvo:700|Permanent+Marker" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="portfolio.css">
<link rel="icon" type="image/png" sizes="16x16" href="./assets/favicon-16x16.png">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Alice Frazier's Portfolio</title>
</head>
<body>
<nav class="navbar navbar-expand-md bg-dark navbar-dark">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About Me</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">My Resume</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">My Projects</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contacts</a>
</li>
</ul>
</div>
</nav>
<div class="container-fluid">
<p class="name">Alice Frazier</p>
<p class="web">Web Design</p>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-md-6">
<img class="mypic" src="./assets/Alice.jpg" width="500" height="600">
</div>
<div class="col-md-6">
<img class="aboutmepic" src="./assets/alice2.jpg" width="350" height="450">
</div>
</div>
</div>
<div class="container-fluid">
<p class="web" id="aboutmelink"> About Me</p>
<p class="aboutme">Currently living and working in Indianapolis, IN. I previously worked for Dominion Dealer Solutions and started there as website tech support, which I loved doing, unfortunately our website team was dissolved and we no longer hosted websites so my
next step was to support our CRM.</p>
<br>
<p class="aboutme">For two years I was a teacher at Sylvan Learning Center where I taught the Lego Robotics class and the Tynker Coding class. If you would like more information on these programs check them out at the links below.</p>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-md-4 home">
<p class="title">Sylvan Learning Center</p>
<a class="sylvan" href="https://www.sylvanlearning.com/" target="_blank"><img src="./assets/sylvan_home_logo.png" height="200" width="200"></a>
</div>
<div class="col-md-4 home">
<p class="title">Lego </p>
<a class="Lego" href="https://www.sylvanlearning.com/stem/robotics-science" target="_blank"><img src="./assets/lego.jpg" height="200" width="200"></a>
</div>
<div class="col-md-4 home">
<p class="title">Tynker</p>
<a class="Tynker" href="https://www.tynker.com/?t=reset" target="_blank"><img src="./assets/tynker.png" height="200" width="300"></a>
</div>
</div>
</div>
<br>
<div class="icon">
<i class="fa fa-github-square" style="font-size:48px"> </i>
<i class="fa fa-linkedin-square" style="font-size:48px"> </i>
</div>
<footer class="footer">
<div class="container-fluid padding">
<div class="row text-center">
<div class="col-md-4">
<p>Alice Frazier</p>
</div>
<div class="col-md-4">
halliwell2046#yahoo.com
</div>
<div class="col-md-4">
(317)313-7712
</div>
</div>
</div>
</footer>
</body>
</html>
So I am creating a bootstrap website. It is supposed to be a one-page website and I have a navar at the top. My navbar is only sticky for the first section and then it just entirely disappears. How do I make it continue to stay sticky so that when I scroll through the entire page comes along at the top?
Here is my current code:
body,
td,
th {
font-family: muli;
font-style: normal;
color: #000000;
}
body {
min-height: 100%;
width: 100%;
argin-left: 0px;
background-image: url();
background-color: #FFFFFF;
}
<!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="">
<title>Group</title>
<!-- Bootstrap Core CSS -->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700,300italic,400italic,700italic" rel="stylesheet" type="text/css">
<link href="vendor/simple-line-icons/css/simple-line-icons.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/stylish-portfolio.min.css" rel="stylesheet">
<!--The following script tag downloads a font from the Adobe Edge Web Fonts server for use within the web page. We recommend that you do not modify it.-->
<script>
var __adobewebfontsappname__ = "dreamweaver"
</script>
<script src="http://use.edgefonts.net/muli:n4:default.js" type="text/javascript"></script>
</head>
<body marginwidth="200px" id="page-top">
<!-- Navigation -->
<header class="header sticky-top">
<nav class="navbar navbar-expand-lg navbar-light bg-white shadow-sm">
<a class="navbar-brand" href="#"><img src="img/MBGlogo.svg" width="200" height="50" alt=""></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation" style="border-radius:30px">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Get Involved</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Career Fair</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Ideation</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Jobs</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Sponsor</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
</nav>
</header>
<!-- Header -->
<header class="masthead d-flex">
<div class="container text-center my-auto">
<h6 style="font-size:25px; letter-spacing:2px; color: white">CLUB</h6>
<h1 style="font-size:85px; color:white">Industry</h1>
<pre> </pre>
<a class="btn btn-primary btn-M js-scroll-trigger" href="#get-involved">Get Involved</a>
</div>
<div class="overlay"></div>
</header>
<!-- About -->
<section class="content-section bg-primary text-white text-center" id="about">
<div class="container text-center">
<div class="content-section-heading">
<h2 class="mb-5">Vision</h2>
<h4 style="font-weight:normal">business</h4>
<h4 style="font-weight:normal">careers</h4>
</div>
</div>
</section>
<!-- Portfolio -->
<section class="content-section" id="portfolio">
<div class="container">
<div class="content-section-heading text-center">
<h3 class="text-secondary mb-0">Portfolio</h3>
<h2 class="mb-5">Recent Projects</h2>
</div>
<div class="row no-gutters">
<div class="col-lg-6">
<a class="portfolio-item" href="#">
<span class="caption">
<span class="caption-content">
<h2>Stationary</h2>
<p class="mb-0">A yellow pencil with envelopes on a clean, blue backdrop!</p>
</span>
</span>
<img class="img-fluid" src="img/portfolio-1.jpg" alt="">
</a>
</div>
<div class="col-lg-6">
<a class="portfolio-item" href="#">
<span class="caption">
<span class="caption-content">
<h2>Ice Cream</h2>
<p class="mb-0">A dark blue background with a colored pencil, a clip, and a tiny ice cream cone!</p>
</span>
</span>
<img class="img-fluid" src="img/portfolio-2.jpg" alt="">
</a>
</div>
<div class="col-lg-6">
<a class="portfolio-item" href="#">
<span class="caption">
<span class="caption-content">
<h2>Strawberries</h2>
<p class="mb-0">Strawberries are such a tasty snack, especially with a little sugar on top!</p>
</span>
</span>
<img class="img-fluid" src="img/portfolio-3.jpg" alt="">
</a>
</div>
<div class="col-lg-6">
<a class="portfolio-item" href="#">
<span class="caption">
<span class="caption-content">
<h2>Workspace</h2>
<p class="mb-0">A yellow workspace with some scissors, pencils, and other objects.</p>
</span>
</span>
<img class="img-fluid" src="img/portfolio-4.jpg" alt="">
</a>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="footer text-center">
<div class="container">
<ul class="list-inline mb-5">
<li class="list-inline-item">
<a class="social-link rounded-circle text-white mr-3" href="mailto: bio#gmail.com">
<i class="icon-envelope"></i>
</a>
</li>
<li class="list-inline-item">
<a class="social-link rounded-circle text-white mr-3" href="#">
<i class="icon-social-twitter"></i>
</a>
</li>
</ul>
<p class="text-muted small mb-0">Copyright ©2020</p>
</div>
</footer>
<!-- Scroll to Top Button-->
<a class="scroll-to-top rounded js-scroll-trigger" href="#page-top">
<i class="fas fa-angle-up"></i>
</a>
<!-- Bootstrap core JavaScript -->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- Plugin JavaScript -->
<script src="vendor/jquery-easing/jquery.easing.min.js"></script>
<!-- Custom scripts for this template -->
<script src="js/stylish-portfolio.min.js"></script>
</body>
</html>
You can remove the sticky-top class and just add header{position:sticky;} in css as there is some particular javascript which hides your header after first section.
Add 'fixed-top' in the nav tag
and remove the " sticky-top" from header tag
I have a CSS sticky footer defined as follows:
#foot {
position:fixed;
left:0px;
bottom:0px;
height:30px;
width:100%;
text-align: right;
padding-top: 7px;
font-size: small;
background-color: none;
}
What looks like a horizontal line appears at the bottom of all forms. When I remove the position: fixed (or absolute) the line is not shown.
Here is the test site
HTML - main index.html
<!DOCTYPE html>
<html lang="en" data-ng-app="wtApp">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW">
<meta name="fragment" content="!">
<meta name="google-site-verification" content="yVui_k1sbN4TDHx-yDmol0MzU1QXaTTGlhNa_gVLzUs" />
<title>Writer's Tryst, where authors and publishers, producers, agents meet.</title>
<meta name="description" content="A better way for writers to find publishers, producers and agents" />
<!-- <base href="/" /> -->
<link href='https://fonts.googleapis.com/css?family=Lobster+Two:700italic' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" data-integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" data-crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" data-integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" data-crossorigin="anonymous">
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" />
<link rel="stylesheet" href="https://getbootstrap.com/dist/css/bootstrap.css" />
<link rel="stylesheet" href="css/main.css" />
<link rel="stylesheet" href="css/shares.css" />
<link rel="shortcut icon" href="img/icons/writers-tryst.png" />
</head>
<body data-ng-controller="mainController">
<header>
<nav class="navbar navbar-light">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#Writers-Tryst">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><img id="logo" src="img/writers-tryst-logo.png" alt="logo" /></a>
<div id="shares">
<!-- Twitter -->
<a href="http://twitter.com/share?url=writers.tryst.ron-tornambe.com&text=<TEXT>&via=<VIA>" target="_blank" title="twitter" class="share-btn twitter">
<i class="fa fa-twitter"></i>
</a>
<!-- Google Plus -->
<a href="https://plus.google.com/share?url=writers.tryst.ron-tornambe.com" target="_blank" title="google+" class="share-btn google-plus">
<i class="fa fa-google-plus"></i>
</a>
<!-- Facebook -->
<a href="http://www.facebook.com/sharer/sharer.php?u=http://writers.tryst.com" target="_blank" title="facebook" class="share-btn facebook">
<i class="fa fa-facebook"></i>
</a>
<!-- StumbleUpon (url, title) -->
<a href="http://www.stumbleupon.com/submit?url=http://writers.tryst.com&title=<TITLE>" target="_blank" class="share-btn stumbleupon">
<i class="fa fa-stumbleupon"></i>
</a>
<!-- Reddit (url, title) -->
<a href="http://reddit.com/submit?url=http://writers.tryst.com&title=<TITLE>" target="_blank" class="share-btn reddit">
<i class="fa fa-reddit"></i>
</a>
<!-- LinkedIn -->
<a href="http://www.linkedin.com/shareArticle?url=http://writers.tryst.com&title=<TITLE>&summary=<SUMMARY>&source=<SOURCE_URL>" target="_blank" title="linked-in" class="share-btn linkedin">
<i class="fa fa-linkedin"></i>
</a>
</div>
</div> <!--navbar-header-->
<div class="collapse navbar-collapse" id="Writers-Tryst">
<ul class="nav navbar-nav">
<li class="active"><a id="homepage" href="/"><i class="glyphicon glyphicon-home"></i> Home</a></li>
<li> Writers</li>
<li> Enablers</li>
<li> About</li>
<li> Privacy/Rules</li>
<li> Contact</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a id="login" href="#log-in"><i class="glyphicon glyphicon glyphicon-log-in"></i> Log-In</a></li>
<li><a id="create-account-link" href="#accounts"><i class="glyphicon glyphicon-user"></i> Create Account</a></li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li><a id="#update-profile" href="update-profile">Update profile</a></li>
<li><a id="#manage-uploads" href="manage-uploads">Manage uploads</a></li>
</ul>
</li>
<li ><a id="#reset-pwd-link" href="reset-pwd"></a></li>
</ul>
</div> <!--navbar-collapse-->
</div> <!--container fluid-->
</nav>
</header>
<div>
<div id="message" class="alert m-t-10"></div>
<div id="main" class="content">
<!-- angular templating -->
<!-- this is where content will be injected -->
<div data-ng-view></div>
</div>
</div>
<div class="panel panel-default">
<div id="foot" class="text-right small">© 2016 Ronald Tornambe, Inc.</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="js/common.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script>
<script src="js/pages.js"></script>
<script>
$("#drop-toggle-1").on("click", function (e) {
e.preventDefault();
});
</script>
</body>
</html>
The Bootstrap panel has a border and box-shadow.
Override it like..
.panel {
border-width:0;
box-shadow:none;
}
http://www.codeply.com/go/CMWIpp8FAE
it comes from this rule in bootstrap,CSS:
.panel-default {
border-color: #ddd;
}
so just reset this rule in your custom CSS like this:
.panel-default {
border-color: transparent;
}
if you are talking about the border line just below your login section then it is because of the class panel which apply
border: 1px solid transparent;
<div class="panel panel-default">
on the Div
Class: 'panel' adds border: 1px solid transparent; and class: 'panel-default' add border-color: #ddd; so your footer does get a border.
You can fix it by adding this to your css:
.panel {border:none;}
I'm using Bootstrap on my website. My website has two columns on a desktop screen: a big area for my content, and a small area at the right side for some information about upcoming events. The two areas nicely resize (become smaller) when I make my browser smaller, and at some point, the rightmost column jumps to the bottom, just as the responsiveness is intended.
On my homepage I use the carousel based on this example of w3schools.
The problem is that the picture of the carousel never resizes according to the column width, it always stays the same. In the w3school example, you can see that resizing your browser results in resizing the images.
My HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Home</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<link rel='stylesheet' type='text/css' href='http://fonts.googleapis.com/css?family=Arimo:400,700'>
<link rel="stylesheet" type='text/css' href="/Content/bootstrap.css" />
<link rel="stylesheet" type='text/css' href="/Content/bootstrap-datepicker.css" />
<link rel="stylesheet" type='text/css' href="/Content/NYC.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="/Scripts/bootstrap-datepicker.js"></script>
<script src="/Scripts/bootstrap.min.js"></script>
<link href="/favicon.ico" rel="shortcut icon" type="image/x-icon" />
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"></a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li>Agenda</li>
<li>Foto's</li>
<li>Contact</li>
<li>Login</li>
</ul>
</div> <!--/.nav-collapse -->
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-sm-8">
<header>
<h2>Welkom</h2>
</header>
<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="3000">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
<li data-target="#myCarousel" data-slide-to="4"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src='https://farm8.staticflickr.com/7497/15440536044_ddb9b9a4f2_z.jpg' alt="Foto" >
<div class="carousel-caption">
<h2>Caption</h2>
</div>
</div>
<div class="item">
<img src='https://farm8.staticflickr.com/7542/15440460614_e147f37c21_z.jpg' alt="Foto">
<div class="carousel-caption">
<h2>Caption</h2>
</div>
</div>
<div class="item">
<img src='https://farm8.staticflickr.com/7562/15761616062_9cd995c76f_z.jpg' alt="Foto">
<div class="carousel-caption">
<h2>Caption</h2>
</div>
</div>
<div class="item">
<img src='https://farm3.staticflickr.com/2905/13976192867_78bd01faa1_z.jpg' alt="Foto">
<div class="carousel-caption">
<h2>Caption</h2>
</div>
</div>
<div class="item">
<img src='https://farm4.staticflickr.com/3949/15574689588_2b427e30fa_z.jpg' alt="Foto">
<div class="carousel-caption">
<h2>Caption</h2>
</div>
</div>
</div><!-- /.carousel-inner -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div><!-- /.carousel -->
</div>
<div class="col-sm-3 col-sm-offset-1">
<header>
<h3>Vandaag</h3>
</header>
<ul class="interestingevents">
<li>
<p class="posted">Niks te zien</p>
</li>
</ul>
<header>
<h3>Komende evenementen</h3>
</header>
<ul class="interestingevents">
<li>
<a href='/Event/showEvent?eventID=13'>
<p class="posted">
zondag 8 maart 2015
</p>
<img src="/Content/Media/logosailing40x40.png" />
<p class="text">
Winterwedstrijd
</p>
<br/>
</a>
</li>
<li>
<a href='/Event/showEvent?eventID=20'>
<p class="posted">
zaterdag 14 maart 2015
</p>
<img src="/Content/Media/logogeneral40x40.png" />
<p class="text">
Onderhoud infrastructuur
</p>
<br/>
</a>
</li>
<li>
<a href='/Event/showEvent?eventID=21'>
<p class="posted">
zondag 15 maart 2015
</p>
<img src="/Content/Media/logogeneral40x40.png" />
<p class="text">
Onderhoud infrastructuur
</p>
<br/>
</a>
</li>
</ul>
<header>
<h3>Gepasseerde evenementen</h3>
</header>
<ul class="interestingevents">
<li>
<p class="posted">
zondag 8 februari 2015
</p>
<img src="/Content/Media/logosailing40x40.png" />
<p class="text">
<a href='/Event/showEvent?eventID=12'>Winterwedstrijd</a>
</p>
<br />
</li>
<li>
<p class="posted">
zondag 18 januari 2015
</p>
<img src="/Content/Media/logogeneral40x40.png" />
<p class="text">
<a href='/Event/showEvent?eventID=17'>Ledenvergadering</a>
</p>
<br />
</li>
<li>
<p class="posted">
zondag 4 januari 2015
</p>
<img src="/Content/Media/logosailing40x40.png" />
<p class="text">
<a href='/Event/showEvent?eventID=10'>Winterwedstrijd</a>
</p>
<br />
</li>
</ul>
</div>
</div>
</div>
<footer>
<div id="copyright">
<div class="container">
<p>Created by </p>
</div>
</div>
</footer>
<!-- Visual Studio Browser Link -->
<script type="application/json" id="__browserLink_initializationData">
{"appName":"Firefox","requestId":"c3ad45de45c543c5bc071cf0007d01e5"}
</script>
<script type="text/javascript" src="http://localhost:60883/d9c407548b294087843ff4faeef78add/browserLink" async="async"></script>
<!-- End Browser Link -->
</body>
</html>
Maybe you can try with the Bootstrap CDN links:
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
Take a look at the Bootstrap website.