CAROUSEL CAPTIONS

Bootstrap Studio Help
1

Good morning to all, I would love to get some help here, i'm going crazy with the captions on a Carousel. I'm trying to get this: [IMG]http://i68.tinypic.com/2yvrucp.jpg[/IMG] I'm positioning the captions with margins, works on on screen size... i' don't know what to do to keep the positions when changing the screen size. Please, help me out.

<pre>
<div data-ride="carousel" data-keyboard="false" class="carousel slide" id="carousel-1">
<div role="listbox" class="carousel-inner">
    <div class="carousel-item active"><img src="http://placeholdit.imgix.net/~text?txtsize=42&amp;txt=Carousel+Image&amp;w=1400&amp;h=600" alt="Slide Image" />
        <div class="carousel-caption">
            <h1 class="text-right" id="top-caption" style="margin:-81px;margin-bottom:-4px;height:51px;">LET'S CRE8</h1>
            <p style="margin-bottom:4px;background-color:#464646;width:431px;margin-left:347px;font-family:Oswald, sans-serif">WE COMBINE SILICON VALLEY TALENT WITH NEARSHORE RESOURCES</p>
            <p><button class="btn btn-primary" type="button" style="background-color:rgb(255,122,0);width:162px;height:39px;margin-right:-80px;font-family:Oswald, sans-serif;font-size:18px;">GET STARTED NOW</button></p>
        </div>
    </div>
    <div class="carousel-item"><img src="http://placeholdit.imgix.net/~text?txtsize=42&amp;txt=Carousel+Image&amp;w=1400&amp;h=600" alt="Slide Image" /></div>
    <div class="carousel-item"><img src="http://placeholdit.imgix.net/~text?txtsize=42&amp;txt=Carousel+Image&amp;w=1400&amp;h=600" alt="Slide Image" /></div>
</div>
<div class="d-none"><a href="#carousel-1"><span></span><span>Previous</span></a><a href="#carousel-1"><span></span><span>Next</span></a></div>

</div>

THANKS IN ADVANCE!

Regards!

2

You need to move the inline stylesheets into your custom CSS file, something like this. For example:

#carousel-1 #top-caption {
     margin:-81px;
     margin-bottom:-4px;
     height:51px;
}

#carousel-1 .carousel-caption p:nth-child(2) {
    margin-bottom:4px;
    background-color:#464646;
    width:431px;
    margin-left:347px;
    font-family:Oswald, sans-serif;
}

#carousel-1 .btn-primary {
    background-color:rgb(255,122,0);
    width:162px;
    height:39px;
    margin-right:-80px;
    font-family:Oswald,sans-serif;
    font-size:18px;
}

Then you can use media queries to change those same settings based on different browser viewport widths. For example:

@media (max-wdith:767px) {
    #carousel-1 #top-caption {
         margin:-40px;
         height:25px;
    }
}

Saj

3

THaaaanks!

4

Your welcome, glad I could help :)

Saj