CODEWITHSUNDEEP
htmltwitter-bootstrapcssresponsive-design
ProEvilz
ProEvilz

Reputation: 5445

How do I make this responsive properly?

I've been trying to make this slightly custom bootstrap carousel truly responsive so that the hero text & button scale correctly.

I've used a mix of the grid and breakpoints but I just can't seem to be able to scale things correctly unless I use 20 breakpoints to ensure the text is the right size so it doesn't get pushed out of view.

enter image description here

See this pen for a demo 

<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
        <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
        <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
        <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
    </ol>
    <div class="carousel-inner">
        <div class="carousel-item active">
            <div class="overlay"></div>
            <img class="d-block w-100" src="https://s3.eu-west-2.amazonaws.com/spindogs/header-image-min.png" alt="First slide">
            <div class="carousel-caption">
                <div class="row">
                    <div class="col text-left px-3 ">
                            <h1>Maecenas gravida</h1>
                            <h1 class="mb-4">auctor suscipit.</h1>
                            <div class="restrct">
                                <p class="lead-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fusce placerate vulputate pulvinar. Maecenas gravida auctor suscipit.</p>
                            </div>
                    </div>
                    <div class="col d-flex justify-content-center align-items-end">
                        <button class="btn btn-default btn-lg">Get a free quote NOW!</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="carousel-item">
            <div class="overlay"></div>
            <img class="d-block w-100" src="https://s3.eu-west-2.amazonaws.com/spindogs/header-image-min.png" alt="First slide">
            <div class="carousel-caption">
                <div class="row">
                    <div class="col text-left px-3 ">
                            <h1>Maecenas gravida</h1>
                            <h1 class="mb-4">auctor suscipit.</h1>
                            <div class="restrct">
                                <p class="lead-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fusce placerate vulputate pulvinar. Maecenas gravida auctor suscipit.</p>
                            </div>
                    </div>
                    <div class="col d-flex justify-content-center align-items-end">
                        <button class="btn btn-default btn-lg">Get a free quote NOW!</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="carousel-item">
            <div class="overlay"></div>
            <img class="d-block w-100" src="https://s3.eu-west-2.amazonaws.com/spindogs/header-image-min.png" alt="First slide">
            <div class="carousel-caption">
                <div class="row">
                    <div class="col text-left px-3 ">
                            <h1>Maecenas gravida</h1>
                            <h1 class="mb-4">auctor suscipit.</h1>
                            <div class="restrct">
                                <p class="lead-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fusce placerate vulputate pulvinar. Maecenas gravida auctor suscipit.</p>
                            </div>
                    </div>
                    <div class="col d-flex justify-content-center align-items-end">
                        <button class="btn btn-default btn-lg">Get a free quote NOW!</button>
                    </div>
                </div>
            </div>
        </div>

    </div>
    <img class="d-block position-absolute w-100 shape" src="https://s3.eu-west-2.amazonaws.com/spindogs/Header_shape.png" alt="shape">
</div>

$primary: #e82036;
$dark: #494949;
$light: #7d7d7d;
.slide {
    width: 100%; 
    .overlay {
        width:100%;
        height:100vh; 
        background: linear-gradient(to right, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0) 100%);
        position:absolute;
        z-index:10;
    }
    .carousel-indicators {
        margin: 0;
    width: 15%;
    right: 0;
    top: 0;
    left: unset;
    justify-content: center;
    align-items: center;
    display: flex;
    bottom: 0;
    flex-direction: column;
    li {
        &.active {
            background-color:$primary;
        }
        margin: 10px 0;
        border-radius:50%;
        padding:10px; 
        width:5px;
            height:5px;
    }
}
    .carousel-caption {
        bottom:40%;
        h1 {
            line-height:2.2rem;
        }
        button {
            padding: 1.2rem 2rem;
        border-radius: 50px;
            background-color:$primary;
            border-color:$primary;
            color:#fff;
            &:hover, :active {
                background-color:darken($primary, 10%);
                border-color:darken($primary, 10%);
            }
        }
        .restrict {
            text-align:left;
            width:70%;
        }
        .lead-text {
            color:#fff;
            margin:0;
        }
    }
}

Upvotes: 2

Views: 104

Answers (2)

Jyoti Pathania
Jyoti Pathania

Reputation: 4989

Try this:

Check Demo HERE

  • Get rid of para on small screen.
  • Use font-responsive mixin to make the font size responsive across defined breakpoints.

HTML:

<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
        <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
        <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
        <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
    </ol>
    <div class="carousel-inner">
        <div class="carousel-item active">
            <div class="overlay"></div>
            <img class="d-block w-100" src="https://s3.eu-west-2.amazonaws.com/spindogs/header-image-min.png" alt="First slide">
            <div class="carousel-caption d-sm-flex text-center text-sm-center justify-content-center align-items-end flex-sm-row h-100">
                <div class="text-center text-sm-left  px-3">
                    <h1>Maecenas gravida</h1>
                    <h1 class="mb-2 mb-sm-2">auctor suscipit.</h1>
                    <div class="restrct d-none d-sm-block">
                        <p class="lead-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fusce placerate vulputate pulvinar. Maecenas gravida auctor suscipit.</p>
                    </div>
                </div>
                <div>
                    <button class="btn btn-default btn-lg">Get a free quote NOW!</button>
                </div>

            </div>
        </div>
        <div class="carousel-item">
            <div class="overlay"></div>
            <img class="d-block w-100" src="https://s3.eu-west-2.amazonaws.com/spindogs/header-image-min.png" alt="First slide">
            <div class="carousel-caption d-sm-flex text-center text-sm-center justify-content-center align-items-end flex-sm-row h-100">
                <div class="text-center text-sm-left  px-3 ">
                    <h1>Maecenas gravida</h1>
                    <h1 class="mb-2 mb-sm-2">auctor suscipit.</h1>
                    <div class="restrct d-none d-sm-block">
                        <p class="lead-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fusce placerate vulputate pulvinar. Maecenas gravida auctor suscipit.</p>
                    </div>
                </div>
                <div>
                    <button class="btn btn-default btn-lg">Get a free quote NOW!</button>
                </div>

            </div>
        </div>
        <div class="carousel-item">
            <div class="overlay"></div>
            <img class="d-block w-100" src="https://s3.eu-west-2.amazonaws.com/spindogs/header-image-min.png" alt="First slide">
            <div class="carousel-caption d-sm-flex text-center text-sm-center justify-content-center align-items-end flex-sm-row h-100">
                <div class="text-center text-sm-left  px-3 ">
                    <h1>Maecenas gravida</h1>
                    <h1 class="mb-2 mb-sm-2">auctor suscipit.</h1>
                    <div class="restrct d-none d-sm-block">
                        <p class="lead-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fusce placerate vulputate pulvinar. Maecenas gravida auctor suscipit.</p>
                    </div>
                </div>
                <div>
                    <button class="btn btn-default btn-lg">Get a free quote NOW!</button>
                </div>

            </div>
        </div>

    </div>
    <img class="d-block position-absolute w-100 shape" src="https://s3.eu-west-2.amazonaws.com/spindogs/Header_shape.png" alt="shape">
</div>

CSS:

more detail about font-responsive mixin here

@mixin font-responsive($fmin, $fdiff, $breakmin, $breakmax) {
    font-size: calc(
        #{$fmin} + #{$fdiff} * ((100vw - #{$breakmin}) / #{$breakmax})
    );
    @media (max-width: $breakmin) {
        font-size: $fmin;
    }
    @media (min-width: round($breakmin + $breakmax)) {
        font-size: round($fmin + $fdiff);
    }
}

$primary: #e82036;
$dark: #494949;
$light: #7d7d7d;
.slide {
    width: 100%;
    .overlay {
        width: 100%;
        height: 100%;
        background: linear-gradient(
            to right,
            rgba(0, 0, 0, 0.8) 0%,
            rgba(0, 0, 0, 0) 100%
        );
        position: absolute;
        z-index: 10;
    }
    .carousel-indicators {
        margin: 0;
        width: 15%;
        right: 0;
        top: 0;
        left: unset;
        justify-content: center;
        align-items: center;
        display: flex;
        bottom: 0;
        flex-direction: column;
        li {
            &.active {
                background-color: $primary;
            }
            margin: 10px 0;
            border-radius: 50%;
            padding: 10px;
            width: 5px;
            height: 5px;
        }
    }
    .carousel-caption {
        padding-bottom: 12%;
        padding-top: 12%;
        h1 {
            line-height: 1.6;
            @include font-responsive(16px, 12, 420px, 1200);
        }
        button {
            padding: 0 18px;
            border-radius: 50px;
            line-height: 3;
            background-color: $primary;
            @include font-responsive(12px, 10, 420px, 1200);
            border-color: $primary;
            color: #fff;
            &:hover,
            :active {
                background-color: darken($primary, 10%);
                border-color: darken($primary, 10%);
            }
        }
        .restrict {
            text-align: left;
        }
        .lead-text {
            color: #fff;
            margin: 0;
            @include font-responsive(12px, 10, 420px, 1200);
        }
    }
}

Upvotes: 1

Sternjobname
Sternjobname

Reputation: 779

I've thrown a couple of things together for you as an example here: https://codepen.io/anon/pen/aKOpGd?editors=1100

The main difference is that I'm sizing the fonts and the line-heights using vw which is a property directly linked to the current width of the user's viewport and will update as the viewport size changes. It has pretty nice compatibility at this stage, but I'll leave it up to you as to whether or not you want to support older versions of IE.

Additionally, all your carousel content was escaping out of the top of the carousel. This is because you are using absolute positioning (which is okay) to force the content a set amount from the bottom of the carousel container (which is less okay). So we're also going to use vw to position that content, but from the top of the container. On the whole, I find it better to work from the top downwards when it comes to positioning in CSS:

.carousel-caption {
        top: 7vw;

So with this, the fonts and positioning of the content is always automatically directly related to the width of the user's viewport, which is fantastic. I've also applied the same idea to the padding around your buttons so that it also sizes as required. Now you just need a couple of media queries in there as you hit the breakpoints which don't automatically look good, and I'd probably consider changing the widths of the two columns for smaller screen sizes.

Upvotes: 0

Related Questions