Want to Make my Existing MVC4 website responsive.

Question

Its my Desktop View ...

But my Mobile View is so bad that can not express in word.

Look my mobile view format below.

How could it possible to make responsive. Is there any way ?

Please Notify me early.

Thanks in Advance

Nazmul.

Nazmul Badsha · Answer

It doesn't work.

Nazmul Badsha · Answer

Dear Sundar I have applied bootstrap. But its not work as well. See my Layout page code: utf-8 /> viewport content= width=device-width initial-scale=1.0 > description content=  > author content=  > @* add by Nazmul *@ ~/favicon.ico rel= shortcut icon type= image/x-icon /> ~/Content/bootstrap.css rel= stylesheet /> @ViewBag.Title - FTSHRIS @Styles.Render( ~/Content/css ) @Scripts.Render( ~/bundles/modernizr ) ~/Content/DataTables/css/jquery.dataTables.css rel= stylesheet /> @* ~/Content/DataTables/css/jquery.dataTables.css rel= stylesheet />*@ ~/Content/Gridmvc.css rel= stylesheet /> ~/Content/jquery.mobile-1.1.2.css rel= stylesheet /> ~/Content/themes/font-awesome.min.css rel= stylesheet /> ~/Content/Site.css rel= stylesheet /> ~/Scripts/css/menu.css rel= stylesheet /> class = content-wrappe navbar-fixed-top role= navigation > class = container style= background-color:white > class = float -left> button class = navbar-toggle data-toggle= collapse data-target= .navbar-collapse style= font-size:medium > class = sr-only > class = icon-bar > class = icon-bar > class = icon-bar > @Url.Action( Index   Home ) class = navbar-brand > ~/Images/FTS-Logo.png title= ftsl alt= additional title width= 210 height= 61 /> @*@Html.ImageActionLink(@Url.Content( ~/Images/acsol_logo2.png )  C I M S   Index  Home  new { title = size  width = 140 height = 50 })*@ @*@Html.ActionLink(  FTSHRIS   Index  Home  null  new { @ class = navbar-brand })*@ class = navbar-collapse collapse style= font-size:large > class = nav navbar-nav style= color:blue > @Html.ActionLink( Home  Index  Home ) @* @Html.ActionLink( About  About  Home ) *@ @Html.ActionLink( Contact  Contact  Home ) class = nav navbar-nav pull-right style= font-size:medium > @ if (Session[ DisplayName ] == null ) { @Html.ActionLink( Login  Login  Login ) } else { @Html.ActionLink( Welcome [  + @Session[ DisplayName ].ToString() +  ]     ) @Html.ActionLink( Logout  Logout  Login ) } @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 $( '#Body' ).css( 'min-height'  minHeight+ 'px' ); } } My Mobile Layout view utf-8 /> @ViewBag.Title viewport content= width=device-width /> ~/Content/jquery.mobile-1.1.2.css rel= stylesheet /> @Styles.Render( ~/Content/Mobile/css  ~/Content/jquerymobile/css ) @Scripts.Render( ~/bundles/jquery  ~/bundles/jquerymobile ) ~/Content/Site.Mobile.css rel= stylesheet /> $(document).ready( function () { $.mobile.ajaxEnabled = true ; }); page data-theme= a > @Html.Partial( _ViewSwitcher ) header > @ViewBag.Title content > @RenderSection( featured  false ) @RenderBody() So please explain how could I do that. ?

Sundar · Answer

check the image tag has class of responsive.?!

Sundar · Answer

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.