Grow your CSS skills. Land your dream job.

Non-Sticky Width

  • # April 6, 2013 at 5:56 am

    Hello.

    I would like my container instead of being 980px wide I would like it to be full width but when make browser small every thing still fits into the page.

    container {
    min-width: 980px;
    }
    Would width of header and nav etc.

    # April 6, 2013 at 6:21 am

    .container {
    width: 100%;
    max-width: 980px;
    }

    # April 6, 2013 at 6:30 am

    @HugoGraudel

    I leave out the margin: 0 auto??

    # April 6, 2013 at 6:31 am

    Yeah, I forgot it. Keep it if you want it to be horizontally centered;

    # April 6, 2013 at 6:38 am

    @HugoGiraudel

    I got it mostly working but when I bring screen in the slide show goes over top doesn’t decrease in size like others.
    [http://mwbcomputers.com.au/mytheme/]

    .nivoSlider {
    position: absolute;
    width: 100%;
    min-width: 980px;
    }
    .nivoSlider img {
    position: absolute;
    top: 0px;
    left: 0px;
    }
    /* If an image is wrapped in a link */
    .nivoSlider a.nivo-imageLink {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    border: 0;
    padding: 0;
    margin: 0;
    z-index: 6;
    display: none;
    }
    /* The slices and boxes in the Slider */
    .nivo-slice {
    display:block;
    position:absolute;
    z-index:5;
    height:100%;
    }
    .nivo-box {
    display:block;
    position:absolute;
    z-index:5;
    }
    /* Caption styles */
    .nivo-caption {
    position:absolute;
    left:0px;
    bottom:0px;
    background:#000;
    color:#fff;
    opacity:0.8; /* Overridden by captionOpacity setting */
    width:100%;
    z-index:8;
    }
    .nivo-caption p {
    padding:5px;
    margin:0;
    }
    .nivo-caption a {
    display:inline !important;
    }
    .nivo-html-caption {
    display:none;
    }
    /* Direction nav styles (e.g. Next & Prev) */
    .nivo-directionNav a {
    position:absolute;
    top:45%;
    z-index:9;
    cursor:pointer;
    }
    .nivo-prevNav {
    left:0px;
    }
    .nivo-nextNav {
    right:0px;
    }
    /* Control nav styles (e.g. 1,2,3…) */
    .nivo-controlNav a {
    position:relative;
    z-index:9;
    cursor:pointer;
    }
    .nivo-controlNav a.active {
    font-weight:bold;
    }
    /* slider theme */

    .slideshow .nivoSlider {
    position: relative;
    background: #fff url(‘../image/loading.gif’) no-repeat 50% 50%;
    margin-bottom: 20px;
    }
    .slideshow .nivoSlider img {
    position: absolute;
    top: 0px;
    left: 0px;
    display: none;
    }
    .slideshow .nivoSlider a {
    border: 0;
    display: block;
    }
    .slideshow .nivo-controlNav {
    position: absolute;
    right: 10px;
    bottom: 5px;
    text-align: center;
    height: 22px;
    z-index: 99;
    }
    .slideshow .nivo-controlNav a {
    vertical-align: top;
    display: block;
    width: 22px;
    height: 22px;
    background: url(‘../image/bullets.png’) no-repeat;
    text-indent:-9999px;
    border:0;
    margin-right:3px;
    float:left;
    }
    .slideshow .nivo-controlNav a.active {
    background-position:0 -22px;
    }
    .slideshow .nivo-directionNav a {
    display:block;
    width:30px;
    height:30px;
    background:url(‘../image/arrows.png’) no-repeat;
    text-indent:-9999px;
    border:0;
    }
    .slideshow a.nivo-nextNav {
    background-position:-30px 0;
    right:15px;
    }
    .slideshow a.nivo-prevNav {
    left:15px;
    }
    .slideshow .nivo-caption {
    text-shadow:none;
    font-family: Helvetica, Arial, sans-serif;
    }
    .slideshow .nivo-caption a {
    color:#efe9d1;
    text-decoration:underline;
    }

    # April 6, 2013 at 6:42 am

    I’m not going to read this.

    The usual solution to make a design *this* size on large screen, then full width when resizing browser / using small screens is this one:

    HTML

    CSS

    .container {
    width: 100%;
    max-width: 980px;
    margin: 0 auto;
    }

    # April 6, 2013 at 6:52 am

    @HugoGiraudel Is there any information sites that I can read abut this .

    Ok Will give it ago thanks I tried it the wrong way by my self before I had done it once before but forgot it was over a year ago

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".