Loading
Want to Make my Existing MVC4 website responsive.  
  •   
  •   
  • @Html.Partial("_UserMenu")  
  • @*Home Page Banner*@  
  • @RenderSection("Jumbotron", false)  
  • class="container body-content clsMinHeight" id="Body">  
  • @*Body*@  
  • @RenderBody()  
  •   
  •   
  • @*Footer*@  
  • @*@Html.Partial("_Footer")*@  
  • @*"~/Scripts/GtrCommon.js">*@  
  • @Scripts.Render("~/bundles/jquery")  
  • @Scripts.Render("~/bundles/jqueryui")  
  • @Scripts.Render("~/bundles/bootstrap")  
  • @RenderSection("scripts", required: false)  
  • "~/Scripts/jquery-2.1.4.min.js">  
  • "~/Scripts/DataTables/jquery.dataTables.min.js">  
  • "~/Scripts/modernizr-2.8.3.js">  
  • @*"text/javascript">  
  • $(document).ready(function () {  
  • fncPagination();  
  • fncFooter();  
  • });  
  • function fncPagination() {  
  • $('#myTable').DataTable({  
  • "aLengthMenu": [[10, 15, 25, 50, -1], [10, 15, 25, 50, "All"]]  
  • });  
  • }*@  
  • "text/javascript">  
  • $(document).ready(function () {  
  • fncPagination();  
  • fncFooter();  
  • });  
  • function fncPagination() {  
  • $('#myTable').DataTable({  
  • "aLengthMenu": [[10, 15, 25, 50, -1], [10, 15, 25, 50, "All"]],  
  • "ordering": false  
  • });  
  • }  
  • function fncScroll() {  
  • $('#myTable').dataTable({  
  • "scrollX": true,  
  • "scrollY": "200px",  
  • "scrollCollapse": true,  
  • "paging": false  
  • });  
  • }  
  • function fncFooter() {  
  • var docHeight = $(window).height();  
  • var minHeight = 597;  
  • if (docHeight > 750) {  
  • minHeight = 835;  
  • }  
  • //var abc = $('#Jumbotron').is(":visible");  
  • var blnJumbotron = $('#Jumbotron').is(":visible");  
  • if (blnJumbotron == true) {  
  • minHeight = minHeight - $('#Jumbotron').height();  
  • }  
  • var blnUserMenu = $('#UserMenu').is(":visible");  
  • if (blnUserMenu == true) {  
  • minHeight = minHeight - $('#UserMenu').height();  
  • }  
  • var bodyHeight = $('#Body').height();  
  • if (bodyHeight <= minHeight) {  
  • $('#Body').css('min-height', minHeight+'px');  
  • }  
  • }  
  •   
  •   
  •   
    • My Mobile Layout view
    1.   
    2.   
    3.   
    4. "utf-8" />  
    5. @ViewBag.Title  
    6. "viewport" content="width=device-width" />  
    7. "~/Content/jquery.mobile-1.1.2.css" rel="stylesheet" />  
    8. @Styles.Render("~/Content/Mobile/css", "~/Content/jquerymobile/css")  
    9. @Scripts.Render("~/bundles/jquery", "~/bundles/jquerymobile")  
    10. "~/Content/Site.Mobile.css" rel="stylesheet" />  
    11.   
    12.   
    13.   
    14. "page" data-theme="a">  
    15. @Html.Partial("_ViewSwitcher")  
    16. "header">  

    17. @ViewBag.Title

        
      
  • "content">  
  • @RenderSection("featured", false)  
  • @RenderBody()  
  •   
  •   
  •   
  •   
    • So please explain how could I do that. ?
  • Sundaram Subramanian

    Sundaram SubramanianPosted Sep 19, 2017, 2:32 AM

    apply boostrap for the page. And also check the image tag has class of responsive. From the view you shared, seems image does not have applied.