2

Seems bootstrap cards are affecting the size of the image I have fixed to the body tag on mobile browsers. Idea is to have image fixed and div's slide over the top. Working fine on desktop.

Have stripped down my code to the offending lines, but can't figure out why the content of the card would affect the size of the body's background image!?!?


<!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">
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="css/bootstrap.css">
        <link href="https://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet">

        <title>Luxury Places - Mobile Test</title>
        <style>

            body {    
                background-image: url("img/pic1.jpg");
                background-repeat: no-repeat;
                background-attachment: fixed;
                background-position: center center;
                background-color:#464646;
                -webkit-background-size: cover;
                -moz-background-size: cover;
                -o-background-size: cover;
                background-size: cover;
            }

            .logo{
              width: 650px;
            }


            .custom-center {
                margin: auto;
            }


            nav{
                background-color: #EDEAF3;
            }

            .vh-center {
              margin: 0;
              position: absolute;
              top: 50%;
              left: 50%;
              -ms-transform: translate(-50%, -50%);
              transform: translate(-50%, -50%);
            }


            .section-nosize{
                padding-top: 100px;
                padding-bottom: 150px;
            }

            .section2{
                background-color: black;
            }

            .container-fluid{
                padding: 0px;
            }

            @media only screen and (max-width: 730px) {
                .logo{
                    width: 400px;
                }
            }
            @media only screen and (max-width: 460px) {
                .logo{
                    width: 350px;

                }
                .vh-center {
                  top: 40%;
                  left: 50%;
                  -ms-transform: translate(-50%, -50%);
                  transform: translate(-50%, -50%);
                }
            }

        </style>
    </head>
    <body>
        <nav class="navbar navbar-expand-sm navbar-light fixed-top" id="navbar">
          <a class="navbar-brand" href="#" id="nb-brand">LP</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>

            <div class="collapse navbar-collapse" id="navbarSupportedContent">

            </div>
        </nav> 



        <div class="container-fluid">
            <div class="section section1" id="sect1">
                <div class="title vh-center">
                    <h1>Logo</h1>
                </div>
            </div>


            <div class="section2 section-nosize" id="sect2">
                <div class="container">
                    <div class="content-dark custom-center">
                        <h2>Locations</h2>

                        <div class="row">
                            <div class="col-lg-4">
                                <div class="card">
                                     <div class="card-header">Blah</div>
                                    <!-- Offending Lines -->
                                     <img src="img/beach.jpg" class="card-img-top" alt="Exotic Beach">
                                     <div class="card-body">
                                      <h3 class="card-title">Blah</h3>
                                      <p class="card-text">Blah</p>
                                      <a href="#" class="btn btn-outline-secondary">Contact Us</a>
                                    </div>
                                    <!-- Offending Lines -->
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>


        </div> 

        <!-- Optional JavaScript -->
        <!-- jQuery first, then Popper.js, then Bootstrap JS -->
        <script src="js/jquery-3.3.1.min.js"></script>
        <script src="js/bootstrap.bundle.js"></script>
        <script>
        // On load
        setSection1Height();

        function setSection1Height(){
            var windowHeight = $(window).height()-$("nav").height();
            $(".section").height(windowHeight+40);
        }

        </script>
    </body>
</html>

I've tried to streamline the page to a small as possible. Comment out the "offending lines" and the image distorts!.

I'll try and upload some images to show what I mean.

As Expected Distorted Normal Scroll Distorted Scroll

Neil White
  • 111
  • 4
  • 18
  • I've just imported your example and tested it locally and it looks fine to me - have you called your bootstrap and jquery from the correct files? – coops Mar 28 '19 at 14:06
  • Yes, works fines in the browser locally, but when I host and try and view on my iphone (safari, chrome) I get the distortion!?!? – Neil White Mar 28 '19 at 14:12
  • Ah right, didn't realise you were using Safari - see this https://stackoverflow.com/q/23236158/10678978 – coops Mar 28 '19 at 14:15
  • Is the same in Chrome as well?? – Neil White Mar 28 '19 at 14:22
  • I would like the fixed backgrounds, but not the end of the world if it doesn't work on mobile. My concern is the zooming in when I add the content to the cards? – Neil White Mar 28 '19 at 14:24

0 Answers0