Greetings DW experts, thanks for looking at this post. I have a carousel background of images positioned 'relative'; then I have a form on top positioned 'absolute'. I was moving along fine with Mamp and Firefox, then I looked at it in Chrome. The form shrinks smaller than the 395px width I gave it. I thought it was because I did not put the form in any kind of container because doing so puts margins on the background images. So, I put the form in a container and came up with the same results in Chrome. I took the container off. I'm confused, please help. screen shots, html file and live link are below. thanks for your support....jw ps. it also shrinks on my iphone. i hope it something real simple 
http://inventoryvideos.fairwaysit.com
.png)
.png)
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Home</title>
<!--===================================================================================================-->
<style type="text/css">
body {
background-color: #808080;}
</style>
</head>
<!--================bootstrap============================================================================================= -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!--==================================================================================================================== -->
<!--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/cousine:n4:default;alexa-std:n4:default.js" type="text/javascript"></script>
<!--==============================================================================================-->
<style type="text/css">
.CenterItem {
display: flex;
justify-content: center;
align-content: center;}
/*<!--===================carousel==========================================================================-->*/
.carousel-item {
height: 100vh;
width: auto;
min-height: 350px;
background: no-repeat center center scroll;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;}
/*<!--================================nav buttons=============================================================-->*/
.btn-group.d-flex.bg-secondary.container {
position: absolute;
top:2%;
left:%;}
#NavBut .btn-group.d-flex.fixed-top.bg-secondary.container {
position: absolute;}
/*<!--===================font==========================================================================-->*/
.txt1 {
position: absolute; left: 45%; top: 10%; z-index: 100; color: white;}
.txt1 {
text-shadow: 2px 2px #000000;}
.h2 {top: 15%;position: absolute;}
h1{
top: 10%;
left:35%;
position: absolute;}
/*<!--========================text contatact form=====================================================-->*/
h1 {
color: white;
position: absolute;
left: 44%;
top: 7%;
z-index: 100;}
.CenterItem.mt-3 {
text-shadow: 2px 2px #000000;
font-size: 3em;}}
.container h1 {
text-align: center;
margin-right: 0px;
}
.container h1 {
font-size: 3em;
text-shadow: 1px 1px #000000;
}
.container.contact-form .pt-2 {
font-family: alexa-std;
font-style: normal;
font-weight: 400;
font-size: 2em;
text-shadow: 2px 2px #000000;
text-align: center;}
/*<!--==========================contact form================================================================-->*/
.container.contact-form {
/*padding-left: 50px;*/
top: 55%;
margin-top: -270px;
width: 395px;
height: auto;
position: absolute;
background: rgba(0,0,0, .6);
color: white;
box-shadow: 0px 0px 10px 3px grey;
border-bottom: thin solid #FFFFFF;
z-index: 100;}
/*<!--====================media query=========================================================================-->*/
@media (min-width: 992px){
.carousel-inner .carousel-item.active #cap1 {
bottom: 20%;
right: 20%; }
.carousel-inner .carousel-item.active #cap2 {
bottom: 20%;
right: 20%;}
.carousel-inner .carousel-item.active #cap3 {
bottom: 20%;
right: 20%;}
}
/*<!--====================media query=========================================================================-->*/
@media (max-width: 992px){
.container.contact-form {
left: 50%;
margin-left: -175px;}
.carousel-inner .carousel-item.active #cap1 {
top: 20px;
left: 20%;
margin-left: -15px;}
.carousel-inner .carousel-item.active #cap2 {
top: 20px;
left: 20%;
margin-left: -15px;}
.carousel-inner .carousel-item.active #cap3 {
top: 20px;
left: 20%;
margin-left: -15px;}
.btn-group.d-flex.bg-secondary.container {
top: 1%;
left: 50%;
margin-left: -355px;}
#NavBut #titleTxt {
display: none;
}
}
/* <!--========================================================================================================--> */
</style>
<body>
<div class="container-fluid">
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel" data-interval="10000">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<!-- Slide One - Set the background image for this slide in the line below -->
<div class="carousel-item active" style="background-image: url('93f8bd0021a0a357f4bb2f8a66d39981767b25bd63ba74f8cc7dda37f5165851.jpg')">
<div id="cap1" class="carousel-caption">
<h3>First Slide</h3>
<p class="lead">This is a description for the first slide.</p>
</div>
</div>
<!-- Slide Two - Set the background image for this slide in the line below -->
<div class="carousel-item" style="background-image: url('images/lightHouse.jpg')">
<div id="cap2" class="carousel-caption">
<h3>Second Slide</h3>
<p class="lead">This is a description for the second slide.</p>
</div>
</div>
<!-- Slide Three - Set the background image for this slide in the line below -->
<div class="carousel-item" style="background-image: url('images/BlueGreen.jpg')">
<div id="cap3" class="carousel-caption">
<h3>Third Slide</h3>
<p>This is a description for the third slide.</p>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" 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="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
<!--==============================================================================================-->
<div class="container" id="NavBut">
<h1 id="titleTxt" class="" style="font-family: 'alexa-std';">Videos - Websites</h1>
<div class="btn-group d-flex fixed-top container" role="group" aria-label="Justified button group with nested dropdown">
<a class="btn btn-secondary w-100 active" href="index.html" role="button">Home</a>
<!--<a class="btn btn-secondary w-100 " href="contact.html" role="button">Contact</a>-->
<!--<a class="btn btn-secondary w-100" href="VideoInventory.html" role="button">Video</a>-->
<a class="btn btn-secondary w-100" href="VideoInventory.html" role="button">Video Inventory</a>
<a class="btn btn-secondary w-100" href="websites.html" role="button">Websites</a>
</div>
</div>
<!--==================================form======================================================-->
<!--<h2 class="txt1">Welcome to Our Site</h2>-->
<div class="container contact-form">
<p class="pt-2">Contact Form</p>
<div class="row">
<div class="col">
<address>P.O. Box 7956 Orlando, FL 32860</address>
<p>Email:- jw.inventoryvideos.com</p>
<p>Phone:- 407-496-4195<span>
<a href="sms:1-407-496-4195"> TEXT</a>
<a href="tel:+1-407-496-4195"> CALL</a>
</span></p>
<!--<div class="col-md-6">-->
<form action="testContact.php" method="post" enctype="multipart/form-data">
<div class="form-group">
<label for="name">Name</label>
<input type="text" class="form-control" placeholder="Enter Name">
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="email" class="form-control" placeholder="Enter Email">
</div>
<div class="form-group">
<label for="message">Your Message</label>
<textarea class="form-control" rows="5"></textarea>
</div>
<div class="form-group">
<button class="btn btn-primary btn-block">Send</button>
</div>
</form>
</div>
</div>
</div>
<!--==============================================================================================-->
<script>
</script>
<!--===================================================================================================-->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="js/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<!--===================================================================================================-->
<script>
</script>
</body>
</html>
1 Correct answer
Have you tried inserting the viewport meta tag?
https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag
Also all except Safari have said they will move over to only supporting the css viewport in a few years, so it maybe worth inserting the rules for that in the css now -
3
Replies
AdChoices