Chrome shrinks absolute form on relative bg, Firefox & Mamp do not ?

Community Beginner ,
Oct 26, 2018 Oct 26, 2018

Copy link to clipboard

Copied

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

Screen Shot 2018-10-26 at 10.08.35 AM (2).png

Screen Shot 2018-10-26 at 10.19.27 AM (2).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>

Views

388

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

LEGEND , Oct 26, 2018 Oct 26, 2018

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 -

https://developer.mozilla.org/en-US/docs/Web/CSS/@viewport

Likes

Translate

Translate
Adobe Community Professional ,
Oct 26, 2018 Oct 26, 2018

Copy link to clipboard

Copied

Are both browsers at the same zoom levels?

I ask because it looks to be the correct size in all of my browsers.

Vivaldi, Chrome, FF, IE, Opera (all on Windows 7).

If I zoom out to about 50-60%, it looks like your scaled down screen shot.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Oct 26, 2018 Oct 26, 2018

Copy link to clipboard

Copied

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 -

https://developer.mozilla.org/en-US/docs/Web/CSS/@viewport

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Oct 26, 2018 Oct 26, 2018

Copy link to clipboard

Copied

LATEST

Also fix your code errors.

Showing results for http://inventoryvideos.fairwaysit.com/ - Nu Html Checker

Nancy O'Shea, Adobe Product User & Community Professional
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines