Many websites like this have slider full width, http://mooringtech.com/
How to make nivo slider full page width? but keep the content of page in the middle?
@{
Layout = "~/Views/Shared/_Root.Head.cshtml";
}
@Html.Widget("body_start_html_tag_after")
@Html.Partial("_Notifications")
@Html.Action("AdminHeaderLinks", "Common")
<div class="master-wrapper-page">
@Html.Action("JavaScriptDisabledWarning", "Common")
<div class="master-wrapper-content">
<script type="text/javascript">
AjaxCart.init(false, '.header-links .cart-qty', '.header-links .wishlist-qty', '#flyout-cart');
</script>
@Html.Partial("Header")
<div class="header-menu">
@Html.Action("TopMenu", "Catalog")
</div>
@Html.Widget("content_before")
@*ajax loading window*@
<div class="ajax-loading-block-window" style="display: none">
<div class="loading-image">
</div>
</div>
<div class="master-wrapper-main">
@RenderBody()
</div>
@Html.Widget("content_after")
</div>
@Html.Action("Footer", "Common")
</div>
@Html.Action("EuCookieLaw", "Common")
@Html.Widget("body_end_html_tag_before")
<div class="leftside-3">
@if (IsSectionDefined("left"))
{
@RenderSection("left")
}
else
{
@Html.Widget("left_side_column_before")
@Html.Action("CategoryNavigation", "Catalog", new { currentCategoryId = currentCategoryId, currentProductId = currentProductId })
@Html.Widget("left_side_column_after_category_navigation")
@Html.Action("ManufacturerNavigation", "Catalog", new { currentManufacturerId = currentManufacturerId })
@Html.Action("VendorNavigation", "Catalog")
@Html.Action("PopularProductTags", "Catalog")
@Html.Action("PollBlock", "Poll", new { systemKeyword = "LeftColumnPoll" })
@Html.Widget("left_side_column_after")
}
</div>
<div class="rightside-3">
@if (IsSectionDefined("right"))
{
@RenderSection("right")
}
else
{
@Html.Widget("right_side_column_before")
@Html.Action("NewsletterBox", "Newsletter")
@Html.Action("RecentlyViewedProductsBlock", "Product", new { productThumbPictureSize = 32 })
@Html.Action("PollBlock", "Poll", new { systemKeyword = "RightColumnPoll" })
@Html.Widget("right_side_column_after")
}
</div>
<div class="center-3">
@Html.Widget("main_column_before")
@RenderBody()
@Html.Widget("main_column_after")
</div>
@if (IsSectionDefined("slider"))
{
@RenderSection("slider")
}
<div class="columns-wrapper clearer">
<div class="leftside-3">
@if (IsSectionDefined("left"))
{
@RenderSection("left")
}
else
{
@Html.Widget("left_side_column_before")
@Html.Action("CategoryNavigation", "Catalog", new { currentCategoryId = currentCategoryId, currentProductId = currentProductId })
@Html.Widget("left_side_column_after_category_navigation")
@Html.Action("ManufacturerNavigation", "Catalog", new { currentManufacturerId = currentManufacturerId })
@Html.Action("VendorNavigation", "Catalog")
@Html.Action("PopularProductTags", "Catalog")
@Html.Action("PollBlock", "Poll", new { systemKeyword = "LeftColumnPoll" })
@Html.Widget("left_side_column_after")
}
</div>
<div class="rightside-3">
@if (IsSectionDefined("right"))
{
@RenderSection("right")
}
else
{
@Html.Widget("right_side_column_before")
@Html.Action("NewsletterBox", "Newsletter")
@Html.Action("RecentlyViewedProductsBlock", "Product", new { productThumbPictureSize = 32 })
@Html.Action("PollBlock", "Poll", new { systemKeyword = "RightColumnPoll" })
@Html.Widget("right_side_column_after")
}
</div>
<div class="center-3">
@Html.Widget("main_column_before")
@RenderBody()
@Html.Widget("main_column_after")
</div>
</div>
@{
Layout = "~/Views/Shared/_ColumnsThree.cshtml";
}
<div class="page home-page">
<div class="page-body">
@Html.Widget("home_page_top")
@Html.Action("TopicBlock", "Topic", new { systemName = "HomePageText" })
@Html.Action("HomepageCategories", "Catalog")
@Html.Action("HomepageProducts", "Product")
@Html.Action("HomepageBestSellers", "Product")
@Html.Action("HomePageNews", "News")
@Html.Action("HomePagePolls", "Poll")
@Html.Widget("home_page_bottom")
</div>
</div>
@{
Layout = "~/Views/Shared/_ColumnsThree.cshtml";
}
@section slider {
@Html.Widget("home_page_top")
}
<div class="page home-page">
<div class="page-body">
@Html.Action("TopicBlock", "Topic", new { systemName = "HomePageText" })
@Html.Action("HomepageCategories", "Catalog")
@Html.Action("HomepageProducts", "Product")
@Html.Action("HomepageBestSellers", "Product")
@Html.Action("HomePageNews", "News")
@Html.Action("HomePagePolls", "Poll")
@Html.Widget("home_page_bottom")
</div>
</div>
@{
Layout = "~/Views/Shared/_Root.Head.cshtml";
}
@Html.Widget("body_start_html_tag_after")
@Html.Partial("_Notifications")
@Html.Action("AdminHeaderLinks", "Common")
<div class="master-wrapper-page">
@Html.Action("JavaScriptDisabledWarning", "Common")
<div class="master-wrapper-content clearer">
<script type="text/javascript">
AjaxCart.init(false, '.header-links .cart-qty', '.header-links .wishlist-qty', '#flyout-cart');
</script>
@Html.Partial("Header")
<div class="header-menu">
@Html.Action("TopMenu", "Catalog")
</div>
@Html.Widget("content_before")
@*ajax loading window*@
<div class="ajax-loading-block-window" style="display: none">
<div class="loading-image">
</div>
</div>
<div class="master-wrapper-main clearer">
@RenderBody()
</div>
@Html.Widget("content_after")
</div>
@Html.Action("Footer", "Common")
</div>
@Html.Action("EuCookieLaw", "Common")
@Html.Widget("body_end_html_tag_before")
/* Customized styles */
.master-wrapper-page {
width: 100%;
}
.master-wrapper-content {
float: none;
margin: 0;
padding: 0;
width: 100%;
}
.header, .header-menu .top-menu, .columns-wrapper {
margin: 0 auto;
width: 960px;
}
.master-wrapper-main .slider-wrapper.theme-default{
max-height: 501px;
overflow: hidden;
}
.footer {
margin: 0 auto;
width: 960px;
}