locked
Really need your help RRS feed

  • Question

  • I am currently creating a website as an assignment in school, since I started this assignment I have been getting difficulties. However, I managed to overcome some; currently there is one particular issue that has been giving me headache and that is making my webpage responsive. Jumbotron and some other write-ups on the webpage appear not to cover the full width of the page when the windows screen is minimized. Here is a bit of what I mean in picture; the code is bottom

    Please help me overcome this thank you.

    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <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>Joscheck Home</title>
    
        <!-- Bootstrap -->
        <link href="css/bootstrap.min.css" rel="stylesheet"/>
        <link href="css/StyleSheet.css" rel="stylesheet" />
        <!-- HTML5 shim and Respond.js for 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/html5shiv/3.7.3/html5shiv.min.js"></script>
          <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
        <![endif]-->
    </head>
    <body style=" background-color:#DCDCDC; background-image:url('images/Dox.png')">
        <form id="form1" runat="server">
        <div>
            <div class="navbar navbar-default navbar-inverse navbar-fixed-top" role="navigation" style="background-color:#200662; font-family:Nunito;">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse" style="background-color:#200662;color:white">
                        <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="Homepage.aspx"></a>
                </div>
                <div class="navbar-collapse collapse">
                    <ul class="nav navbar-nav navbar-right">
                        <li><a href="Homepage.aspx" style="color: #FFFFFF">Home</a></li>
                        <li><a href="#" style="color: #FFFFFF">About Us</a></li>
                        <li><a href="#" style="color: #FFFFFF">Contact</a></li>
                        <li><a href="SignIn.aspx"style="color: #FFFFFF">Login/Register</a></li>
                    </ul>
                </div>
            </div>
        </div>
        </div>
                <div class="jumbotron" style="margin-top:15px; border:10px #ccc; box-shadow:4px 8px 10px #ccc; background-color:#A9A9A9; font-family:Nunito; height:200px;">
                    <div class="container">
                    <h1 style="color:#200662; margin-top:2px; font-size:xx-large">Welcome To JosCheck</h1>
                    <p>
                        <i style="color:black; font-size:large; font-style:normal">Your Home For Tracking Lost Cars and/or Phones</i></p>
                    <p>
                        <a href="#" class="btn btn-primary" role="button">See More &raquo;</a>
                     </p>
                </div>
                    </div>
            <div class="container-fluid">
               <div class="jumbotron" style="margin-top:0%; background-image: url('images/pexels-photo-1229861.jpeg'); height:250px; background-size:cover;">
                       <h1 style="color: red; font-size: x-large; font-family: Co Headline Corp">Best Tracking System!</h1>
                       <p>
                           <i style="color: white; font-family:St Ryde; font-size:large; font-style:normal">Search Our Vast Database To Verify That Vehicle Before You Buy</i>
                       </p>
                       <p>
                            <asp:TextBox ID="TextBox1" runat="server" Height="30px" Width="250"></asp:TextBox>
                           <a href="#" class="btn btn-primary"; role="button">Search</a>
                       </p>
                   
                   </div>
           </div>
            <div class="container">
                <div class="row">
                    <div class="section">
                        <div class="col-md-4">
                            <h2 style="color: red; margin-top: 0; font-size: x-large; font-family: Capoon PERSONAL USE;">How It Works...</h2>
                        </div>
                    </div>
                </div>
            </div>
            <div class="container">
          <!-- Example row of columns -->
          <div class="row">
              <div class="section">
                  <div class="col-md-4">
                      <h2 style="color: #200662; margin-top: 0; font-size: larger; font-family: St Ryde;">Car Verification and Tracking</h2>
                      <hr />
                      <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. </p>
                      <p><a class="btn btn-primary" href="#" role="button">Read More &raquo;</a></p>
                  </div>
              </div>
    
            <div class="col-md-4">
              <h2 style="color:#200662; margin-top:0; font-size:larger; font-family:St Ryde;">Phone Verification and Tracking</h2><hr />
              <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. </p>
              <p><a class="btn btn-primary" href="#" role="button">Read More &raquo;</a></p>
           </div>
            <div class="col-md-4">
              <h2 style="color:#200662; margin-top:0; font-size:larger; font-family:St Ryde;">Tracking System for Children and Homes Buglars</h2><hr />
              <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper.  Ut fermentum justo sit amet risus.</p>
              <p><a class="btn btn-primary" href="#" role="button">Read More &raquo;</a></p>
            </div>
          </div>
            </div>
    
            <hr /><footer class="container" style="background-color:black; width:100%; height:auto;">
                    <p class="pull-right" style="color: white;"><a href="#">Back to Top</a></p>
                    <p style="color: white;">Copyright &copy; 2018 Doxtrak Tech. All Rights Reserved. &middot; <a href="Homepage.aspx">Home</a> &middot; <a href="#">About Us</a> &middot; <a href="#">Contact</a> &middot</p>
            </footer>
        </form>
         <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <!-- Include all compiled plugins (below), or include individual files as needed -->
        <script src="js/bootstrap.min.js"></script>
    </body>
    </html>
    


    • Moved by CoolDadTx Friday, February 22, 2019 2:55 PM ASP.NET related
    Thursday, February 21, 2019 11:41 PM

All replies

  • This has nothing to do with C#, so it should not be in a C# forum.  It's a bootstrap question.

    You should use the developer tools in your web browser to chase this down.  You can click on an element, and see what padding and margins the browser has applied.  The default "jumbotron" class does have margins and padding, and we don't know if you've modified it further in your own CSS.

    Also, all of the browsers have problems when you make the windows very small.  It's just a matter of trying to shove 10 pounds of grain into a 5 pound sack.  They do the best the can, but you should not expect perfection.


    Tim Roberts | Driver MVP Emeritus | Providenza &amp; Boekelheide, Inc.

    Friday, February 22, 2019 1:18 AM
  • Hi Donald Uko,

    Thank you for posting here.

    For your question is more related to ASP.NET, you could post a new thread in ASP.NET forum for suitable support.

    The Visual C# forum discuss and ask questions about the C# programming language, IDE, libraries, samples, and tools.

    Best Regards,

    Wendy


    MSDN Community Support
    Please remember to click "Mark as Answer" the responses that resolved your issue, and to click "Unmark as Answer" if not. This can be beneficial to other community members reading this thread. If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.

    Friday, February 22, 2019 3:11 AM