MonoX support board

Start the conversation, ask questions and share tips and solutions with fellow developers.

Non-registered users can only browse through our support boards. Please register now if you want to post your questions. It takes a second and it is completely free. Alternatively, you can log in without registration using your credentials at major sites such as Google, Microsoft Live, OpenId, Facebook, LinkedIn or Yahoo.

Where to edit the homepage banner dimensions ?  (Mono Support )

Viewed 25503 time(s), 19 post(s) 2/13/2013 9:34:58 PMby super
ivanb

ivanb

2/22/2013 4:05:15 PM
If slider works on desktop resolution, than it's fine. In your layout.css file you have breaking points for responsive design (it looks like this: @media (max-width: xxx px)), and there stand rules for diferent screen sizes (resolutions). You should go to mobile sizes @media (min-width: 480px) and (max-width: 767px) and set new hight there. Try to play with this, and that should solve your problem.
This content has not been rated yet. 
459 Reputation 55 Total posts
super

super

2/22/2013 4:17:29 PM
I have tried this but not working

@media (min-width: 260px) and (max-width: 770px)

which way I should go in ? increase or decrease ?
This content has not been rated yet. 
6018 Reputation 709 Total posts
super

super

2/22/2013 4:25:25 PM
Ivanb, is it possible for you to test it on your send any a test slide with dimensions 770px X 260px ?

I would deeply appreciate if you could help me like that ? by this you will know and have better idea what I am dealing with ?

Please see the sample slide (attached) for you to test
This content has not been rated yet. 
6018 Reputation 709 Total posts
khorvat

khorvat

2/22/2013 4:47:55 PM
Can you let us know if you are using MonoX built-in jQuery slider or you use the one I have suggested in one of my posts ?

Just to be clear once again, keep in mind that we can't provide you with a working solution for your custom design, you should turn to your design department in case we have tried to give you a few fixes but they don't work on your design, or you can always use our custom development services where we will provide you with a working solution.

Regards
This content has not been rated yet. 
15993 Reputation 2214 Total posts
super

super

2/22/2013 5:00:14 PM
Khorval I am using the monox default homepage slider and all I am trying to do it increase the width of the slide image from 540px to 770px... the height is still the same as default monox slide images.

The problem is increasing width of slide is not working on mobile phone and that's all I need help with...I would appreciate any help or advice ?
This content has not been rated yet. 
6018 Reputation 709 Total posts
super

super

2/23/2013 12:54:27 PM
anyone ?
This content has not been rated yet. 
6018 Reputation 709 Total posts
ivanb

ivanb

2/25/2013 8:41:39 AM
Super,
if you are using default MonoX slider on non changed MonoX home page:
1. you should prepare your image to proper dimensions
2. you need to set new width to class .slides .slide
3. you should change your container div class from span6 to at least span8 (in the same time you should change left container from span6 to span4) so your slider can fit
4. when you go to smaller sizes, such as mobile, height of your elements is set to old dimensions, so you gonna have to adjust it on your layout.css file, set any height thats related to slider to new dimension, that fits yours

Step 3 only applies if you have content next to the slider (as on MonoX), if your slider lays in bigger container, you can neglect this step.

Hope this will help...
This content has not been rated yet. 
459 Reputation 55 Total posts
super

super

2/26/2013 9:13:31 PM
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?




This content has not been rated yet. 
6018 Reputation 709 Total posts
ivanb

ivanb

2/27/2013 1:35:30 PM
Super,
I have tested everything once again, and everything works just the way I explained to you last time. Right now I will attach
screenshots so you can see it more clearly. On slider-1.png I have marked containers resized with proper classes, so your slider can fit in. On slider-2.png I have mark css rule (witch is placed in layout.css, not in default.css) that bothers you. All you have to do is go to layout.css and set height to the value you need.

I think the easiest way to find out your height value is to inspect and edit element with Firebug (or with some other similar software or method) and then type that value in layout.css. If you are not familiar with responsive design (breaking points, media queries,...) I suggest that you try to google it, so you can get better picture.

Hope this helps,
Ivan
This content has not been rated yet. 
459 Reputation 55 Total posts
1 2