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?