User-389303965 posted
Hello all,
I have been building a website using Visual Studio 2015 and ASP.NET.
My bootstrap elements (jumbotron and carousel) work and display perfectly on the computer and tablet, but no elements show up on phones. I am not sure what the problem is. I am definitely a novice at this, so I am sure there are several problems.
Some elements are existing from the Visual Studio templates, while other elements I wrote myself. What I wrote myself came from W3schools tutorials.
Below is the code from my Site.Master and Default.aspx pages. The site is also live at cuddlepupcreations.com
<%@ Master Language="VB" AutoEventWireup="true" CodeBehind="Site.master.vb" Inherits="CPC_10_8_16.SiteMaster" %>
<%@ Import Namespace="CPC_10_8_16" %>
<%@ Import Namespace="Microsoft.AspNet.Identity" %>
<!DOCTYPE html>
<html lang="en">
<head runat="server">
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title><%: Page.Title %></title>
<asp:PlaceHolder runat="server">
<%: Scripts.Render("~/bundles/modernizr") %>
</asp:PlaceHolder>
<webopt:bundlereference runat="server" path="~/Content/css" />
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<script type="text/javascript">
var appInsights=window.appInsights||function(config){
function r(config){t[config]=function(){var i=arguments;t.queue.push(function(){t[config].apply(t,i)})}}var t={config:config},u=document,e=window,o="script",s=u.createElement(o),i,f;for(s.src=config.url||"//az416426.vo.msecnd.net/scripts/a/ai.0.js",u.getElementsByTagName(o)[0].parentNode.appendChild(s),t.cookie=u.cookie,t.queue=[],i=["Event","Exception","Metric","PageView","Trace","Ajax"];i.length;)r("track"+i.pop());return r("setAuthenticatedUserContext"),r("clearAuthenticatedUserContext"),config.disableExceptionTracking||(i="onerror",r("_"+i),f=e[i],e[i]=function(config,r,u,e,o){var s=f&&f(config,r,u,e,o);return s!==!0&&t["_"+i](config,r,u,e,o),s}),t
}({
instrumentationKey:"70e86e3f-0b8f-4a9e-90c6-85b257919b6f"
});
window.appInsights=appInsights;
appInsights.trackPageView();
</script>
<style>
body{
background-color:black;
margin:0;
padding:0;
}
div.jumbotron{
background-color:#2ad4b5;
text-align:center;
width:auto;
}
div.row{
background-color:#2ad4b5
}
div.img{
margin:auto;
border:1px solid ;
float:left;
width:auto;
}
div.img:hover{
border:1px solid;
}
div.img img{
width:100%;
height:auto;
}
div.desc{
padding:1px;
text-align:center;
}
div.responsive{
padding: 1px;
float:left;
width:24.9999%;
}
@media only screen and (max-width: 700px){
div.responsive{
width:49.9999%;
margin:6px 0;
}
}
@media only screen and (max-width:500px){
div.responsive{
width:100%;
}
div.jumbotron{
max-width:100%;
height:auto;
width:auto;
}
}
div.clearfix:after{
content:" ";
display:table;
clear:both
}
ul.topnav{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
background-color:#333;
}
ul.topnav li{
float:left;
}
ul.topnav li a{
display:block;
color:white;
text-align:center;
padding:14px 16px;
text-decoration:none;
}
ul.topnav li a:hover:not(.active){
background-color:#111;
}
ul.topnav li.right {
float:right;
padding-right:10px;
}
@media screen and (max-width:600px){
ul.topnav li.right,
ul.topnav li {float:none;}
}
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
width:75%;
margin:auto;
}
</style>
</head>
<body>
<form runat="server">
<asp:ScriptManager runat="server">
<Scripts>
<%--To learn more about bundling scripts in ScriptManager see http://go.microsoft.com/fwlink/?LinkID=301884 --%>
<%--Framework Scripts--%>
<asp:ScriptReference Name="MsAjaxBundle" />
<asp:ScriptReference Name="jquery" />
<asp:ScriptReference Name="bootstrap" />
<asp:ScriptReference Name="respond" />
<asp:ScriptReference Name="WebForms.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebForms.js" />
<asp:ScriptReference Name="WebUIValidation.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebUIValidation.js" />
<asp:ScriptReference Name="MenuStandards.js" Assembly="System.Web" Path="~/Scripts/WebForms/MenuStandards.js" />
<asp:ScriptReference Name="GridView.js" Assembly="System.Web" Path="~/Scripts/WebForms/GridView.js" />
<asp:ScriptReference Name="DetailsView.js" Assembly="System.Web" Path="~/Scripts/WebForms/DetailsView.js" />
<asp:ScriptReference Name="TreeView.js" Assembly="System.Web" Path="~/Scripts/WebForms/TreeView.js" />
<asp:ScriptReference Name="WebParts.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebParts.js" />
<asp:ScriptReference Name="Focus.js" Assembly="System.Web" Path="~/Scripts/WebForms/Focus.js" />
<asp:ScriptReference Name="WebFormsBundle" />
<%--Site Scripts--%>
</Scripts>
</asp:ScriptManager>
<div class="container">
<ul class="topnav">
<li><a href="Default.aspx">Home</a></li>
<li><a href="About.aspx">About</a></li>
<li><a href="productsservices.aspx">Products and Services</a></li>
<li class="right"><a href="Contact.aspx">Contact</a></li>
</ul>
</div>
<div class="container body-content">
<asp:ContentPlaceHolder ID="MainContent" runat="server">
</asp:ContentPlaceHolder>
<hr />
<footer>
<p>© <%: DateTime.Now.Year %> - Cuddle Pup Creations</p>
</footer>
</div>
</form>
</body>
</html>
<%@ Page Title="Home Page" Language="VB" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Default.aspx.vb" Inherits="CPC_10_8_16._Default" %>
<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
<div class="container">
<div class="jumbotron">
<h1>Cuddle Pup Creations</h1>
<p class="lead">A place to see our creations.</p>
<p><a href="about.aspx" class="btn btn-primary btn-lg">Learn more »</a></p>
</div>
</div>
<div class="container">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="etchedcups/star1.JPG" alt="Star" />
</div>
<div class="item">
<img src="coatedcup/hallows.JPG" alt="Hallows" />
</div>
<div class="item">
<img src="etchedcups/and.JPG" alt="And" />
</div>
<div class="item">
<img src="coatedcup/jnp1.JPG" alt="JNP" />
</div>
</div>
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<div class="container">
<div class="jumbotron">
<div class="row">
<div class="col-md-4" >
<h2>Products and Services</h2>
<p>
<a class="btn btn-primary btn md" href="productsservices.aspx">Products/Services » </a>
</p>
</div>
<div class="col-md-4">
<h2>Pictures</h2>
<p>
<a class="btn btn-primary btn-md" href="pictures.aspx">Pictures »</a>
</p>
</div>
<div class="col-md-4">
<h2>Contact Us</h2>
<p>
<a class="btn btn-primary btn-md" href="Contact.aspx">Contact Us »</a>
</p>
</div>
</div>
</div>
</div>
</asp:Content>
