I am new to HTML/CSS/JS and trying to rewrite a ColdFusion PHP website(http://startabusinessweekend.com) to ASP.NET MVC5 EF5 with bootstrap 3 built-in. I got all the business logic and functionalities working. I have been searching all day to figure out how to mimic the EXACT screen behavior. i.e. to keep the background image and the input text box fixed regardless of the screen sizes. I know this is the opposite of what MVC5/bootstrap is supposed to do - Responsive Web Design. Apart of redesigning the layout, I need to use the same layout and get it done in two days!

The problem I struggled with is that the input text boxes "float" around as the screen sizes change/shrink, which normally should be what you want for a RWD website. How can I dumb-down MVC5/bootstrap to display fixed content as you can see in the current website. http://startabusinessweekend.com.

In addition, the top part of the background image on my MVC webpage doesn't get displayed either.

If there is an answer out there please forgive me. Thanks in advance!

here is the view cshtml I wrote:

  @model SABW.Models.tTellUsAboutYou

@{
    ViewBag.Title = "Start a Business Weekend";
}

@*<h2>Create</h2>*@

@using (Html.BeginForm()) 
{
    @Html.AntiForgeryToken()
    <div class="form-horizontal">
        @*<div id="background" />*@   @* background image *@

            @Html.ValidationSummary(true)

            <div class="form-group">  @* form-group is equalvalent to a row *@
                @*@Html.LabelFor(model => model.FirstName, new { @class = "control-label col-md-2 col-xs-2" })*@
                <div class="col-lg-12">
                    @Html.TextBoxFor(model => model.FirstName, new { @placeholder = "First Name" })
                    @Html.ValidationMessageFor(model => model.FirstName)
                </div>

            <div class="form-group">
                @*@Html.LabelFor(model => model.LastName, new { @class = "control-label col-md-2 col-xs-2" })*@
                <div class="col-md-12 col-xs-12">
                    @*@Html.EditorFor(model => model.LastName)*@
                    @Html.TextBoxFor(model => model.LastName, new { @placeholder = "Last Name" })
                    @Html.ValidationMessageFor(model => model.LastName)
                </div>
            </div>

            <div class="form-group">
                @*@Html.LabelFor(model => model.EmailAddress, new { @class = "control-label col-md-2 col-xs-2" })*@
                <div class="col-md-12 col-xs-12">
                    @*@Html.EditorFor(model => model.EmailAddress)*@
                    @Html.TextBoxFor(model => model.EmailAddress, new { @placeholder = "Email Address" })
                    @Html.ValidationMessageFor(model => model.EmailAddress)
                </div>
            </div>

            <div class="form-group">
                @*@Html.LabelFor(model => model.DayTimePhone, new { @class = "control-label col-md-2 col-xs-2" })*@
                <div class="col-md-12 col-xs-12">
                    @*@Html.EditorFor(model => model.DayTimePhone)*@
                    @Html.TextBoxFor(model => model.DayTimePhone, new { @placeholder = "Phone" })
                    @Html.ValidationMessageFor(model => model.DayTimePhone)
                </div>
            </div>

            <div class="form-group">
                @*@Html.LabelFor(model => model.Zip, new { @class = "control-label col-md-2 col-xs-2" })*@
                <div class="col-md-12 col-xs-12">
                    @*@Html.EditorFor(model => model.Zip)*@
                    @Html.TextBoxFor(model => model.Zip, new { @placeholder = "Zip Code" })
                    @Html.ValidationMessageFor(model => model.Zip)
                </div>
            </div>

            <div class="form-group">
                <div class="col-md-3 col-xs-3">
                    <input type="submit" value="Please sign me up now" class="btn btn-danger" />
                </div>
                <div class="col-md-9" id="video">
                        <iframe width="400" height="283" src="//www.youtube.com/embed/VpVo8WRpb9c" frameborder="0" allowfullscreen></iframe>
                </div>
            </div>

            <div class="form-group">
                <div class="col-md-2 col-xs-2 col-md-offset-4 col-xs-offset-4">
                    <h3>@*@Html.ActionLink("FAQ'S", "QnA", "SABW")*@ </h3> @* need to pass the ViewBag.SourceName to the FAQ controller*@
                    <h2>@Html.ActionLink("FAQ'S", "QnA") </h2> @* need to pass the ViewBag.SourceName to the FAQ controller*@
                </div>
            </div>
            <input type="hidden" name="SourceName" id="SourceName" value="@ViewBag.SourceName" />
        </div>
   </div>
}

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}


and here is the _Layout.cshtml (I tried to tweaked the viewport!)


    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    @*<meta name="viewport" content="width=2048, min-scale=1.0, max-scale=1.0, initial-scale=1.0">*@
    <title>@ViewBag.Title</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
</head>
<body>
    **bold**<div id="background"/>**bold** @* background image *@
        <div class="container body-content">
            @RenderBody()
            @*<hr />*@
            <footer>
                <p id="privacy">&copy;@DateTime.Now.Year <a href="http://www.theentrepreneurssource.com" target="_blank">The Entrepreneur's Source</a> | <a href="privacy.html" target="_blank">Privacy Policy</a></p>
            </footer>
        </div>
    @Scripts.Render("~/bundles/jqueryval")  @* KHP 12/19/2014 added for validation *@
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)
</body>
</html>

Related posts

Recent Viewed