Login
Back to all discussion topics

Mono Support Where to edit the homepage banner dimensions ? 

Viewed 36798 time(s), 19 post(s), 2/13/2013 9:34:58 PM - by super
ivanb
ivanb
2/22/2013 4:05:15 PM
459 Reputation 55 Total posts

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.

11
super
super
2/22/2013 4:17:29 PM
6018 Reputation 709 Total posts

I have tried this but not working

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

which way I should go in ? increase or decrease ?

12
super
super
2/22/2013 4:25:25 PM
6018 Reputation 709 Total posts

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

13
khorvat
khorvat
2/22/2013 4:47:55 PM
15993 Reputation 2214 Total posts

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

14
super
super
2/22/2013 5:00:14 PM
6018 Reputation 709 Total posts

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 ?

15
super
super
2/23/2013 12:54:27 PM
6018 Reputation 709 Total posts

anyone ?

16
ivanb
ivanb
2/25/2013 8:41:39 AM
459 Reputation 55 Total posts

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...

17
super
super
2/26/2013 9:13:31 PM
6018 Reputation 709 Total posts

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?




18
ivanb
ivanb
2/27/2013 1:35:30 PM
459 Reputation 55 Total posts

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

19
1 2
This is a demo site for MonoX. Please visit Mono Software for more info.