I want to stretch images in a carousel the entire width and height of the div that contains the carousel. However, the images are currently not occupying 100% width of the div, and the height is smaller or larger than the div. I am using Bootstrap 4.3.1. My code excerpt is shown below. Entire code is in this JS Fiddle page.
<div class="row">
<!-- card 1 -->
<div class="col-sm-4 card" style="height: 350px">
<div class="card-body small-tab-container">
<h6 class="card-title">Activity (last 7 days)</h6>
<p>Some content</p>
</div>
</div> <!-- end card 1 -->
<!-- card 2 -->
<div class="col-sm-4 card" style="height: 350px;">
<div id="photoCarousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://media.wired.com/photos/5fb70f2ce7b75db783b7012c/master/pass/Gear-Photos-597589287.jpg" class="d-block img-fluid">
</div>
<div class="carousel-item">
<img src="https://images.pexels.com/photos/3680219/pexels-photo-3680219.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="d-block img-fluid">
</div>
<div class="carousel-item">
<img src="https://www.cnet.com/a/img/-qQkzFVyOPEoBRS7K5kKS0GFDvk=/940x0/2020/04/16/7d6d8ed2-e10c-4f91-b2dd-74fae951c6d8/bazaart-edit-app.jpg" class="d-block img-fluid">
</div>
<!-- the below code will insert the previous and next photo arrows -->
<a class="carousel-control-prev" href="#photoCarousel" 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="#photoCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div> <!-- end carousel -->
</div> <!-- end card 2 -->
<!-- card 3 -->
<div class="col-sm-4 card" style="Height: 350px">
<div class="card-body small-tab-container">
<h6 class="card-title">Upcoming Events</h6>
<p>Some content</p>
</div>
</div> <!-- end card 3-->
</div> <!-- end: row 1 -->
Your card <div>s still have their default padding,
Change all the <div class="col-sm-4 card" ...> to <div class="col-sm-4 card p-0" ....>.
or change the appropriate classes to include padding: 0;
With some CSS the object-fit and object-position of the images, and adding some other bootstrap utility classes, I am able to make your images take up 100% height and width of your carousel container. Is this what you are looking for?
.carousel-item img {
object-fit: cover;
object-position: center center;
}
<!doctype html>
<html lang="en">
<head>
<!-- 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">
<title>Hello, world!</title>
</head>
<body>
<h1>Page title</h1>
<div class="row">
<!-- card 1 -->
<div class="col-sm-4 card" style="height: 350px">
<div class="card-body small-tab-container">
<h6 class="card-title">Activity (last 7 days)</h6>
<p>Some content</p>
</div>
</div> <!-- end card 1 -->
<!-- card 2 -->
<div class="col-sm-4 card p-0" style="height: 350px;">
<div id="photoCarousel" class="carousel h-100 slide" data-ride="carousel">
<div class="carousel-inner h-100">
<div class="carousel-item h-100 active">
<img src="https://media.wired.com/photos/5fb70f2ce7b75db783b7012c/master/pass/Gear-Photos-597589287.jpg" class="position-absolute t-0 l-0 h-100 w-100">
</div>
<div class="carousel-item h-100">
<img src="https://images.pexels.com/photos/3680219/pexels-photo-3680219.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="position-absolute t-0 l-0 w-100 h-100">
</div>
<div class="carousel-item h-100">
<img src="https://www.cnet.com/a/img/-qQkzFVyOPEoBRS7K5kKS0GFDvk=/940x0/2020/04/16/7d6d8ed2-e10c-4f91-b2dd-74fae951c6d8/bazaart-edit-app.jpg" class="position-absolute t-0 l-0 h-100 w-100">
</div>
<!-- the below code will insert the previous and next photo arrows -->
<a class="carousel-control-prev" href="#photoCarousel" 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="#photoCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div> <!-- end carousel -->
</div> <!-- end card 2 -->
<!-- card 3 -->
<div class="col-sm-4 card" style="Height: 350px">
<div class="card-body small-tab-container">
<h6 class="card-title">Upcoming Events</h6>
<p>Some content</p>
</div>
</div> <!-- end card 3-->
</div> <!-- end: row 1 -->
<!-- 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>
Related
I have an issue with < a > < finger > < img > < figcaption > ...!
Whey I use only tag < a > and < img > in loop of :::
<div class="container-fluid">
<div class="row">
<div class="col-sm-12 view-waid">
<a href="#">
<img src="https://www.chd4.com/uni-thumbs/c1abc5891b5ba4dde2431d3730a95ffea9cc3f66.jpg" width="200" height="252" />
</a>
<a href="#">
<img src="https://www.chd4.com/uni-thumbs/c1abc5891b5ba4dde2431d3730a95ffea9cc3f66.jpg" width="200" height="252" />
</a>
Its just work fine view
But when I just insert this
<div class="container-fluid">
<div class="row">
<div class="col-sm-12 view-waid">
<a href="#">
<figure>
<img src="https://www.chd4.com/uni-thumbs/c1abc5891b5ba4dde2431d3730a95ffea9cc3f66.jpg" width="200" height="252" />
<figcaption>
<h4>MYMYMY</h4>
</figcaption>
</figure>
</a>
<a href="#">
<figure>
<img src="https://www.chd4.com/uni-thumbs/c1abc5891b5ba4dde2431d3730a95ffea9cc3f66.jpg" width="200" height="252" />
<figcaption>
<h4>MYMYMY</h4>
</figcaption>
</figure>
</a>
</div>
It just broke off into vertical. Look Here
I need this to horizontal like a image gallery.
Where is the problem???
I am not using extra CSS.
Here is my full code
<!DOCTYPE html>
<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">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title><tag:main_title /></title>
<!-- Bootstrap 4 CSS. This is for the alpha 3 release of Bootstrap 4. This should be updated when Bootstrap 4 is officially released. -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.3/css/bootstrap.min.css" integrity="sha384-MIwDKRSSImVFAZCVLtU0LMDdON6KVCrZHyVQQj6e8wIEJkW4tvwqXrbMIya1vriY" crossorigin="anonymous">
<!-- Custom CSS: You can use this stylesheet to override any Bootstrap styles and/or apply your own styles -->
<link href="http://192.168.0.103/style/mynew_1.0/css/custom.css" rel="stylesheet">
<!-- For icons -->
<link href="http://192.168.0.103/style/mynew_1.0/css/font-awesome-4.6.3/css/font-awesome.min.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --><!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<!-- Navigation -->
<nav id="topNav" class="navbar navbar-full navbar-fixed-top navbar-dark bg-inverse m-b-1">
<button class="navbar-toggler hidden-md-up pull-right" type="button" data-toggle="collapse" data-target="#navbar">
☰
</button>
<a class="navbar-brand" href="#"><tag:site_name /></a>
<div class="collapse navbar-toggleable-sm" id="navbar">
<tag:main_dropdown />
<!-- Search -->
<form class="form-inline pull-xs-right">
<input class="form-control" type="text" placeholder="Search">
<button class="btn btn-secondary" type="submit">Search</button>
</form>
</ul>
</div>
</nav>
<header>
<div class="header-blurb">
<div class="container">
<div class="row">
<tag:main_header />
</div>
<div class="row">
<div class="col-sm-12 header-blurb-ads">
<h6>ads</h6>
</div>
</div>
<div class="row">
<div class="col-sm-12 header-blurb-ssmenu">
<h6>sub-menu</h6>
</div>
</div>
<div class="row">
<div class="col-sm-12 header-blurb-slideshow">
<h6>slide-show</h6>
</div>
</div>
</div>
</div>
</header>
<div class="container-fluid">
<div class="row">
<!-- Left Column -->
<div class="col-sm-1 view-waid">
<tag:main_left />
</div>
<!-- /Left Column -->
<!-- Center Column -->
<div class="col-sm-8 view-waid">
<!-- Articles -->
<tag:main_content />
<!-- Img test 2 -->
<!-- Img test 2 -->
</div>
<!-- /Center Column-->
<!-- Right Column -->
<div class="col-sm-3 view-waid">
<tag:main_right />
</div> <!-- /Right Column -->
</div>
</div>
<!--/container-fluid-->
<!-- Image box testing -->
<div class="container-fluid">
<div class="row">
<div class="col-sm-12 d-flex view-waid">
<a href="#">
<figure>
<img src="https://www.chd4.com/uni-thumbs/c1abc5891b5ba4dde2431d3730a95ffea9cc3f66.jpg" width="200" height="252" />
<figcaption>
<h4>MYMYMY</h4>
</figcaption>
</figure>
</a>
<a href="#">
<figure>
<img src="https://www.chd4.com/uni-thumbs/c1abc5891b5ba4dde2431d3730a95ffea9cc3f66.jpg" width="200" height="252" />
<figcaption>
<h4>MYMYMY</h4>
</figcaption>
</figure>
</a>
</div>
</div>
</div>
<!-- /Image box testing -->
<footer>
<div class="footer-blurb">
<div class="container">
<div class="row">
<div class="col-sm-3 footer-blurb-item">
<h3><i class="fa fa-text-height" aria-hidden="true"></i> ADS-1</h3>
<p>PLEASE GIVE ADS</p>
<p><a class="btn btn-primary" href="#">FOR SHOW</a></p>
</div>
<div class="col-sm-3 footer-blurb-item">
<h3><i class="fa fa-wrench" aria-hidden="true"></i> ADS-2</h3>
<p>PLEASE GIVE ADS -- 2 </p>
<p><a class="btn btn-success" href="#">FOR SHOW - 2</a></p>
</div>
<div class="col-sm-3 footer-blurb-item">
<h3><i class="fa fa-paperclip" aria-hidden="true"></i> ADS-3</h3>
<p>PLEASE GIVE ADS -- 3</p>
<p><a class="btn btn-primary" href="#">FOR SHOW - 3</a></p>
</div>
<div class="col-sm-3 footer-blurb-item">
<!-- Thumbnails -->
<h3><i class="fa fa-camera" aria-hidden="true"></i> ADS-4</h3>
<div class="row">
<div class="col-xs-6">
<a href="#" class="img-fluid">
<img src="holder.js/110x80?theme=vine" alt="">
</a>
</div>
<div class="col-xs-6">
<a href="#" class="img-fluid">
<img src="holder.js/110x80?theme=sky" alt=""></a>
</div>
<div class="col-xs-6">
<a href="#" class="img-fluid">
<img src="holder.js/110x80?theme=sky" alt="">
</a>
</div>
<div class="col-xs-6">
<a href="#" class="img-fluid">
<img src="holder.js/110x80?theme=vine" alt="">
</a>
</div>
</div>
</div>
</div>
<!-- /.row -->
<h4>MY-Test_IS NOT GOOD</h4>
</div>
</div>
<div class="small-print">
<div class="container">
<p>Terms & Conditions | Privacy Policy | Contact</p>
<p>Copyright © Example.com 2015 </p>
</div>
</div>
</footer>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js" integrity="sha384-THPy051/pYDQGanwU6poAc/hOdQxjnOEXzbT+OuUAFqNqFjL+4IGLBgCJC3ZOShY" crossorigin="anonymous"></script>
<!-- Tether -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.2.0/js/tether.min.js" integrity="sha384-Plbmg8JY28KFelvJVai01l8WyZzrYWG825m+cZ0eDDS1f7d/js6ikvy1+X+guPIB" crossorigin="anonymous"></script>
<!-- Bootstrap 4 JavaScript. This is for the alpha 3 release of Bootstrap 4. This should be updated when Bootstrap 4 is officially released. -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.3/js/bootstrap.min.js" integrity="sha384-ux8v3A6CPtOTqOzMKiuo3d/DomGaaClxFYdCu2HPMBEkf6x2xiDyJ7gkXU0MWwaD" crossorigin="anonymous"></script>
<!-- Initialize Bootstrap functionality -->
<script>
// Initialize tooltip component
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
// Initialize popover component
$(function () {
$('[data-toggle="popover"]').popover()
})
</script>
<!-- Placeholder Images -->
<script src="js/holder.min.js"></script>
</body>
</html>
Based on your code, just add class row or d-flex next to col-sm-12.
Based on your BS link, just add CSS like:
.row{
display:flex;
flex-wrap:wrap;
}
DEMO
.row{
display:flex;
flex-wrap:wrap;
}
<link rel="stylesheet" href="maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.3/css/…" integrity="sha384-MIwDKRSSImVFAZCVLtU0LMDdON6KVCrZHyVQQj6e8wIEJkW4tvwqXrbMIya1vriY" crossorigin="anonymous">
<div class="container-fluid">
<div class="row">
<div class="col-sm-12 row view-waid">
<a href="#">
<figure>
<img src="https://www.chd4.com/uni-thumbs/c1abc5891b5ba4dde2431d3730a95ffea9cc3f66.jpg" width="200" height="252" />
<figcaption>
<h4>MYMYMY</h4>
</figcaption>
</figure>
</a>
<a href="#">
<figure>
<img src="https://www.chd4.com/uni-thumbs/c1abc5891b5ba4dde2431d3730a95ffea9cc3f66.jpg" width="200" height="252" />
<figcaption>
<h4>MYMYMY</h4>
</figcaption>
</figure>
</a>
</div>
</div>
</div>
I was trying to adjust the fonts in my html page according to the screen size.
I was using
body{
font-size:1vmax;
}
but when i decided to not use it anymore, the font is still changes according to the screen size. It seems fine when i not reference the css code though.. can anyone help me?
here is my html code:
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Kokeru</title>
<!-- fonts -->
<!-- raleway for kokeru title -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Raleway:ital,wght#1,600&display=swap" rel="stylesheet">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<!-- custom styling -->
<link href="assets/css/custom-style.css" rel="stylesheet">
</head>
<body>
<!-- navbar -->
<nav class="navbar py-0">
<a class="navbar-brand " href="#" id="kokeruBrand">Kokeru</a>
<a class="my-0 ml-auto mr-5 py-0" href="#">
<button class="btn btn-outline-info" type="button">Login</button>
</a>
<!-- navbar -->
</nav>
<!-- penjelasan kokeru -->
<!-- beserta tanggal dan jam -->
<div class="text-center" id="penjelasanKokeru">
<h2>Monitoring Kebersihan dan Kerapihan Ruangan<br>Gedung Bersama Maju</h2>
<h3>Hari Minggu Tanggal 13 Desember 2020 Jam 11:11</h3>
</div>
<!-- ruangan2nya -->
<div class="container-fluid my-5">
<div class="row">
<a href="#" class="card-link col-lg-2">
<div class="card mx-3 px-0">
<div class="card-body text-center">
<h4 class="card-title text-center">R.123</h4>
BELUM<br>
Hilmi<br>
click for more detail
</div>
</div>
</a>
<a href="#" class="card-link col-lg-2">
<div class="card mx-3 px-0" style="width: 13rem;">
<div class="card-body text-center">
<h4 class="card-title text-center">R.123</h4>
BELUM<br>
Hilmi<br>
click for more detail
</div>
</div>
</a>
<a href="#" class="card-link col-lg-2">
<div class="card mx-3 px-0" style="width: 13rem;">
<div class="card-body text-center">
<h4 class="card-title text-center">R.123</h4>
BELUM<br>
Hilmi<br>
click for more detail
</div>
</div>
</a>
<a href="#" class="card-link col-lg-2">
<div class="card mx-3 px-0" style="width: 13rem;">
<div class="card-body text-center">
<h4 class="card-title text-center">R.123</h4>
BELUM<br>
Hilmi<br>
click for more detail
</div>
</div>
</a>
<a href="#" class="card-link col-lg-2">
<div class="card mx-3 px-0" style="width: 13rem;">
<div class="card-body text-center">
<h4 class="card-title text-center">R.123</h4>
BELUM<br>
Hilmi<br>
click for more detail
</div>
</div>
</a>
<a href="#" class="card-link col-lg-2">
<div class="card mx-3 px-0" style="width: 13rem;">
<div class="card-body text-center">
<h4 class="card-title text-center">R.123</h4>
BELUM<br>
Hilmi<br>
click for more detail
</div>
</div>
</a>
<!-- row -->
</div>
<!-- ruangan2nya -->
</div>
<!-- Option 2: jQuery, Popper.js, and Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>
</body>
</html>
here is my custom-style.css code :
body{
background-color: #bed0ca;
/* font-size: 1vmax; */
}
#kokeruBrand{
font-family: 'Raleway', sans-serif;
}
nav{
background-color: #e3f2fd;
}
#penjelasanKokeru{
color: blue;
}
/* a.card-link,
a.card-link:hover {
color: inherit;
} */
/*
#media screen and (max-width : 320)
{
body
{
font:1.5rem;
}
}
#media screen and (max-width : 1204px)
{
body
{
font:2.5rem;
}
} */
according to the comment, it seems that i still use my cached version of my stylesheet.
According to the comment, and like the Wechuck's answer,
take a look at the styling used via your browsers inspector/developer-tools you are probably still using a cached version of your stylesheet. Ctrl+F5 should force a reload.
according to the comment, it seems that i still use my cached version of my stylesheet.
You should reload the browser with Ctrl + F5
Or Ctrl + Shift + R
My teacher has been assigning my class these trainings from a class on Lynda.com (Bootstrap 4 Essentials Trainings).
I have no idea what's wrong with my code. I copied it directly from the trainings and I'm not sure what happened.
The carousel will only load images with the active class
The accordion won't show content unless I apply the show class
The alert doesn't go away when I click the 'x'
In one document, I copied the code and made alterations to fit the requirements for the assignment I've been given. In the other, I copy-pasted the elements directly from the completed files that are working as they should when I run them. Neither of these documents is functioning properly (these files are for an assignment that is separate from the Lynda training files):
<html lang="en">
<head>
<title>Worksheet 8</title>
<!--
Author: Crab
Date: 11/20/2020
Filename: worksheet8.html
-->
<!-- 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://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
</head>
<body>
<header>
<h1 class="p-3 text-left text-light bg-dark d-md-none d-sm-block">Chapter 8 Worksheet</h1>
</header>
<header class="jumbotron jumbotron-fluid p-4 bg-dark d-none d-md-block">
<h1 class="display-1 mb-4 text-center text-light">Chapter 8 Worksheet</h1>
</header>
<div class="container">
<h2>Carousel</h2>
<div class="row">
<section class="col-12">
<div class="carousel slide" id="featured" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#feature" data-slide-to="0"></li>
<li data-target="#feature" data-slide-to="1"></li>
<li data-target="#feature" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item">
<img class="d-nlock w-100" src="images/image1.JPG" alt="Lifestyle Photo">
</div>
<div class="carousel-item">
<img class="d-nlock w-100" src="images/image2.JPG" alt="Mission">
<div class="carousel-caption d-none d-md-block">
<h3>Pete, owner of McAllister</h3>
<p>"Wisdom Pet Medicine is the only clinic around that will even book pet fish for appointments."</p>
</div>
</div>
<div class="carousel-item active">
<div><img class="d-nlock w-100" src="images/image3.JPG" alt="Vaccinations"></div>
</div>
</div>
<a class="carousel-control-prev" href="#featured" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true">
<span class="sr-only">Previous</span>
</span>
</a>
<a class="carousel-control-next" href="#featured" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true">
<span class="sr-only">Next</span>
</span>
</a>
</div>
<h2>Our Mission</h2>
<p>Wisdom Pet Medicine strives to blend the best in traditional and alternative medicine in the diagnosis and treatment of companion animals including dogs, cats, birds, reptiles, rodents, and fish. We apply the wisdom garnered in the centuries old tradition of veterinary medicine, to find the safest treatments and cures.</p>
<p>We strive to be your pet's medical experts from youth through the senior years. We build preventative health care plans for each and every one of our patients, based on breed, age, and sex, so that your pet receives the most appropriate care at crucial milestones. We want to give your pet a long and healthy life.</p>
</section>
</div><!-- row -->
<h2 class="pt-4">Accordion</h2>
<div class="accordion" id="servicesaccordion">
<div class="card">
<div class="card-header" id="groomingheading">
<h5 class="mb-0">
<a href="#grooming" data-toggle="collapse" aria-expanded="true" aria-controls="grooming">
Grooming
</a>
</h5>
</div><!-- card header -->
<div id="grooming" class="collapse show" data-parent="#servicesaccordion" aria-labelledby="groomingheading">
<div class="card-body">
<p>Our therapeutic grooming treatments help battle fleas, allergic dermatitis, and other challenging skin conditions.</p>
</div>
</div><!-- collapse -->
</div><!-- card -->
<div class="card">
<div class="card-header" id="generalhealthheading">
<h5 class="mb-0">
<a href="#generalhealth"
class="collapsed"
data-toggle="collapse"
aria-expanded="false"
aria-controls="generalhealth"
>General Health</a>
</h5>
</div><!-- card header -->
<div id="generalhealth" class="collapse" data-parent="#servicesaccordion" aria-labelledby="generalhealthheading">
<div class="card-body">
<p>Wellness and senior exams, ultrasound, x-ray, and dental cleanings are just a few of our general health services.</p>
</div>
</div><!-- card collapse -->
</div><!-- card -->
<div class="card">
<div class="card-header" id="nutritionheading">
<h5 class="mb-0">
<a href="#nutrition" class="collapsed" data-toggle="collapse"
aria-expanded="false">
Nutrition
</a>
</h5>
</div><!-- card header -->
<div id="nutrition" class="collapse" data-parent="#servicesaccordion" aria-labelledby="nutritionheading">
<div class="card-body">
<p>Let our nutrition experts review your pet's diet and prescribe a custom nutrition plan for optimum health and disease prevention.</p>
</div>
</div><!-- collapse -->
</div><!-- card -->
</div><!-- accordion -->
<h2 class="pt-4">Alert</h2>
<div class="alert alert-info alert-dismissable fade show">
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="alert-heading">Standard Checkups</h4>
<p class="mb-2">Our standard checkups offer ultrasounds, x-rays and dental cleanings.</p>
More Info
</div>
</div><!-- container -->
<script src="js/jquery.slim.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>```
Replace the last 3 with these
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>
And it should work fine now, it was most likely a problem with your script tags
I want my cordova app to look less like a web app and more like a real app by eliminating left and right scroll.
I've set the overflow-x property to hidden on the html and body tags, and that works for all but the page below, which scrolls left and right but shouldn't.
Have I misconstructed the grid? I've tried to apply the "overlow-x: hidden" property to an enclosing div instead of the body and html as suggested elsewhere, tried applying the property to the individual divs, attempted limiting width on the divs. I've tried changing the html position to fixed (which fixes the left-right scroll but also stops up down which I need). You can view the page below on an iOS device to see the behaviour here. Which of my lousy skillsets -- css, html, or bootstrap -- is letting me down here?
<!DOCTYPE html>
<html lang="en" style="position: relative; min-height: 100%;">
<head>
<meta charset="utf-8" />
<title>
My Awesome Title
</title>
<meta name="generator" content="BBEdit 11.0" />
<link rel="stylesheet" href="css/bootstrap.min.css"> <link rel="stylesheet" href="css/entypo.min.css">
<script type="text/javascript" src="scripts/jquery-2.0.3.min.js">
</script>
<script type="text/javascript" src="scripts/bootstrap.min.js">
</script>
<script type="text/javascript" src="scripts/bootbox.min.js">
</script>
<style>
html, body {
overflow-x: hidden !important;
}
</style>
<meta name='viewport' content='width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no' />
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3" style="background-color:#F8F8F8;">
<h2 class="text-center">
My Awesome Title
</h2>
<br />
<div id="hexpix" class="center-block">
<br /><br />
<div id="hexpixdiv">
</div>
</div>
<!-- Alert Space -->
<div id="AlertSpace" class="center-block" style="text-align:center; width:75%">
</div>
<br />
<!-- Hex Content Space for text -->
<div id="hexindex" class="text-center">
</div>
<!-- hexindex close -->
<div id="hexcontent" class="text-center">
<!--
<p>
Blah blah this text should NOT scroll left and right because overflow-x is set to hidden but it slides back and forth like a hotplate on butter. Why, people, Why?
<p>
-->
</div>
<!-- hexcontent close -->
<div id='HelpButton'>
</div>
</div>
<!-- Column class close-->
</div>
<!-- Row class close-->
<br />
</div>
<!--Container close-->
<div id="sharestrip" style="position: absolute; bottom:40px; width:100%; height:10px;">
<div class="row">
<div class="col-xs-2 text-center">
<a href="javascript:void(0)" class="Reddit">
<span>
</span>
</a>
</div>
<div class="col-xs-2 text-center">
<a href="javascript:void(0)" class="SMS">
<span class="icon-export">
</span>
</div>
<div class="col-xs-2 text-center">
<a href="javascript:void(0)" class="Email">
<span class="icon-gmail">
</span>
</a>
</div>
<div class="col-xs-2 text-center">
<a href="javascript:void(0)" class="Twitter">
<span class="icon-twitter">
</span>
</a>
</div>
<div class="col-xs-2 text-center">
<a href="javascript:void(0)" class="Facebook">
<span class="icon-facebook">
</span>
</a>
</div>
<div class="col-xs-2 text-center">
<a href="javascript:void(0)" class="tumblr">
<span>
</span>
</a>
</div>
</div>
<!-- Row -->
</div>
<!-- Sharestrip -->
<div id="footer" style="position: absolute;
bottom: 0;
width: 100%; height: 20px;">
<!-- See hex.css for custom css on this -->
<div class="col-xs-12 navbar-inverse navbar-fixed-bottom">
<div class="container">
<div class="row">
<div class="col-xs-3 text-center">
<a href="javascript:void(0)">
<span class="nav-link">
</span>
</a>
</div>
<div class="col-xs-2 text-center">
<a href="javascript:void(0)"
<span class="nav-link">
1
</span>
</a>
</div>
<div class="col-xs-2 text-center">
<a href="javascript:void(0)">
<span class="nav-link">
2
</span>
</a>
</div>
<div class="col-xs-2 text-center">
<a href="javascript:void(0)">
<span class="nav-link">
3
</span>
</a>
</div>
<div class="col-xs-3 text-center">
<a href="javascript:void(0)">
<span class="nav-link">
</span>
</a>
</div>
</div>
<!-- End Row -->
</div>
<!-- End Container -->
</div>
<!-- End Navbar -->
</div>
<!-- End Footer -->
</body>
</html>
When you set overflow: hidden to element it doesn't mean it stops to be scrollable... it just hides the scrollbar. Since mobile devices scroll contents when touching anywhere on the element, it just remains scrollable.
The fact is - your website is scrollable on X-Axis even on desktop devices, you just hide it by using overflow-x: hidden on body tag.
The reason why your website is x-scrollable on all devices is that you forgot to add class="container" to <div id="sharestrip"... and the row inside it has 100%+15px(left margin)+15px(right margin) which is bigger than window width.
This behaviour is reduced by .container by it's padding-left: 15px and padding-right: 15px, so simply you need to remember of adding class="container" to parent of the row.
I recently built a website, I used bootstrap to make it responsive. Everything was working pretty smooth, when I shrank my browser it changed the layout as it was supposed to, so I thought that it was going to work the same way by the time I access it from my phone, but it turns out that I was wrong, when I access the site from my phone it displays the regular site, it doesn't render to use the mobile layout.
My code is just plain HTML and I'm using bootstrap 3, any suggestions?
Thanks in advanced.
<html lang="en">
<head>
<!--Seg:header-->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap/js/bootstrap.min.js"></script>
<script src="js/edison.js"></script>
<!-- Bootstrap -->
<link href="js/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="css/edison.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="header">
<span id="leftHeaderImg">
<img src="images/header.gif" />
</span>
<span class="header-right-block">
<div class="header-medium-text">"One call does it all"</div>
<div class="header-phone">800-875-9626</div>
<div class="header-small-text">we handle everything for the funeral<br />
business except caskets and vaults</div>
</span>
</div>
<!--top nav menu-->
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target="#example-navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<span class="navbar-brand">Menu</span>
</div><!--end of navbar-header-->
<div class="collapse navbar-collapse" id="example-navbar-collapse">
<ul class="nav navbar-nav">
<li>Products</li>
<li>About</li>
<li>Contact Us</li>
<li>Login</li>
</ul>
</div>
</nav><!--end of top nav menu-->
<!--Seg:carousel-->
<div class="col-sm-10">
<div id="this-carousel-id" class="carousel slide hidden-xs"><!-- class for animation -->
<div class="carousel-inner">
<div class="item active">
<img src="images/carrousel.png" alt="" />
<div class="carousel-caption">
<p>Product 1</p>
</div>
</div>
<div class="item">
<img src="images/carrousel.png" alt="" />
<div class="carousel-caption">
<p>Product 2</p>
</div>
</div>
<div class="item">
<img src="images/carrousel.png" alt="" />
<div class="carousel-caption">
<p>Product 3</p>
</div>
</div>
<div class="item">
<img src="images/carrousel.png" alt="" />
<div class="carousel-caption">
<p>Product 4</p>
</div>
</div>
</div><!-- end of carousel-inner -->
<!-- Next and Previous controls -->
<a class="carousel-control left" href="#this-carousel-id" data-slide="prev">‹</a>
<a class="carousel-control right" href="#this-carousel-id" data-slide="next">›</a>
</div><!-- end of carousel -->
</div><!--end of col-sm-10 -->
<!--End:carousel-->
<!--Seg:content-->
<div class="row">
<div class="col-sm-3">
<!--sidebar nav menu-->
<div class="sidebar-nav">
<div class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target=".sidebar-navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<span class="visible-xs navbar-brand">Categories</span>
</div><!--end of navbar-header-->
<div class="navbar-collapse collapse sidebar-navbar-collapse">
<ul class="nav navbar-nav">
<li>Acknoledgement Cards</li><!--class="active"-->
<li>Air Trays</li>
<li>Body Bags</li>
<li>Chapel Equipment</li>
<li>Flower Handling</li>
<li>Funeral Garments</li>
<li>Jewish Service Needs</li>
<li>OSHA</li>
<li>Preparation Room</li>
<li>Rosary Beads</li>
<li>Urns</li>
</ul>
</div><!--end of nav-collapse-->
</div>
</div><!--end of sidebar nav menu-->
</div><!-- end of col-sm-3 -->
<!--content-->
<div class="col-sm-9">
<div class="row">
<div class="text"><strong>Best Sellers:</strong></div>
<div class="col-xs-12">
<div class="row">
<div class="col-md-3 col-sm-6 post">
<img src="images/thumbnail.png" alt="" />
<h2>Item</h2>
<p>Dummy Text! Dummy Text! Dummy Text! Dummy Text!
Dummy Text! Dummy Text! </p>
<span class="btn btn-default">Details</span>
</div>
<div class="col-md-3 col-sm-6 post">
<img src="images/thumbnail.png" alt="" />
<h2>Item 2</h2>
<p>Dummy Text! Dummy Text! Dummy Text! Dummy Text!
Dummy Text! Dummy Text! </p>
<span class="btn btn-default">Details</span>
</div>
</div>
</div><!-- end of col-xs-12-->
</div>
</div><!--end of col-sm-9-->
</div> <!-- end of row-->
<!--End:content-->
<!--Seg:footer-->
<footer class="row footer">
<div class="container">
<div class="panel-footer">
<p>Copyright © 2014<br />
Site design: <br />
Return Policy<br />
Privacy Policy
</p>
</div><!--end of panel-footer-->
</div>
</footer>
<!--End:footer-->
<!--Seg:closePage-->
</div><!--end of container-->
<!--End:closePage-->
</body>
</html>