Iavnb,
I don't know if you read my post before or not but I am already using span 8 for my homepage slides, here is my code from default.aspx page (and side column is span 4):
<div class="span8 clearfix">
<div style="position: relative;">
<MonoX:SlideShow runat="server" ID="ctlSlideShow" Title='<%$ Code: PageResources.Title_RightSection %>'
NavigationNextCaption="<%$ Code: MonoSoftware.MonoX.Resources.DefaultResources.SlideShow_Next.ToUpper() %>"
NavigationPreviousCaption="<%$ Code: MonoSoftware.MonoX.Resources.DefaultResources.SlideShow_Prev.ToUpper() %>">
<SlideShowItems>
<ModuleGallery:SlideShowItem runat="server" ImageUrl="/App_Themes/Default/img/Projects/HomeSlide22.jpg" Url="http://www.mydomain.com/page/" Title="Title"></ModuleGallery:SlideShowItem>
</SlideShowItems>
</MonoX:SlideShow>
</div>
<br />
<portal:PortalWebPartZoneTableless HeaderText='<%$ Code: PageResources.Zone_LeftPartZone %>' ID="leftPartZone" runat="server" Width="100%" ChromeTemplateFile="Standard.htm">
<ZoneTemplate>
<MonoX:BlogContainer ID="blogContainer" runat="server" UsePrettyPhoto="true" DateFormatString="d" RelatedContentVisible="true" EnableSyntaxHighlighter="true" GravatarRenderType="NotSet" RewritePageTitle="false" />
</ZoneTemplate>
</portal:PortalWebPartZoneTableless>
</div>
Here is my default.css
/**** Slideshow - START ****/
.slides
{
width: 100%;
height: 260px;
z-index: 100;
}
.slides_container
{
width: 100%;
height: auto;
overflow: hidden;
position: relative;
display: block;
}
.slides .slide
{
width: 770px;
height: 260px;
display: block;
}
.slides .slide H2
{
font-size: 48px;
line-height: 50px;
}
.slides .slide H2 SPAN
{
color: #777;
}
.slides .slide H2,
.slides .slide P
{
position: relative;
z-index: 100;
margin-right: 230px;
text-shadow: 1px 1px #fff;
}
.slides .slide IMG
{
width: 100%;
position: absolute;
top: 0px;
left: 0px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
.slides .title
{
width: 100%;
background: #2B2C31;
font-family: 'BebasNeueRegular';
color: #fff;
font-size: 22px;
text-shadow: 0px 0px #fff;
text-align: center;
filter: Alpha(opacity=85)!important;
opacity: .85!important;
padding: 10px;
position: absolute;
left: 0px;
bottom: 0px;
box-sizing: border-box; /* css3 rec */
-moz-box-sizing: border-box; /* ff2 */
-ms-box-sizing: border-box; /* ie8 */
-webkit-box-sizing: border-box; /* safari3 */
-khtml-box-sizing: border-box; /* konqueror */
-moz-border-radius-bottomleft: 5px;
-webkit-border-bottom-left-radius: 5px;
border-bottom-left-radius: 5px;
-moz-border-radius-bottomright: 5px;
-webkit-border-bottom-right-radius: 5px;
border-bottom-right-radius: 5px;
z-index: 100;
box-sizing: border-box; /* css3 rec */
-moz-box-sizing: border-box; /* ff2 */
-ms-box-sizing: border-box; /* ie8 */
-webkit-box-sizing: border-box; /* safari3 */
-khtml-box-sizing: border-box; /* konqueror */
}
.slides .next-text
{
background: url(img/bg.png) repeat;
position: absolute;
top: 50%;
right: 0px;
width: 45px;
height: 40px;
padding: 0px 10px;
margin-top: -20px;
line-height: 40px;
display: block;
z-index: 101;
outline: none 0px;
color: #999;
text-decoration: none;
text-align: right;
}
.slides .prev-text
{
background: url(img/bg.png) repeat;
position: absolute;
top: 50%;
left: 0px;
width: 45px;
height: 40px;
padding: 0px 10px;
margin-top: -20px;
line-height: 40px;
display: block;
z-index: 101;
outline: none 0px;
color: #999;
text-decoration: none;
}
.slides .next-text
{
-moz-border-radius-topleft: 3px;
-webkit-border-top-left-radius: 3px;
border-top-left-radius: 3px;
-moz-border-radius-bottomleft: 3px;
-webkit-border-bottom-left-radius: 3px;
border-bottom-left-radius: 3px;
}
.slides .prev-text
{
-moz-border-radius-topright: 3px;
-webkit-border-top-right-radius: 3px;
border-top-right-radius: 3px;
-moz-border-radius-bottomright: 3px;
-webkit-border-bottom-right-radius: 3px;
border-bottom-right-radius: 3px;
}
.slides .next-text:hover,
.slides .prev-text:hover
{
color: #0180b3;
}
.slides .next-text IMG,
.slides .prev-text IMG
{
border: none 0px;
}
/**** Slideshow - END ****/
My slide images are dimensions: 770px width AND 260px height
I am don't what to set in layout.css and how much...
You mentioned @media (min-width: 480px) and (max-width: 767px)
But I have already tried changing them by increasing both and decreasing both but nothing is happening ? How much am I supported to change ?
Can you PLEASE help me?