view raw
Jonhz Jonhz - 11 months ago 52
CSS Question

Responsove Bootstrap Carousel

I'm having problems in setting my Bootstrap Carousel responsive. This is the code I have for it:

<div id="slider" class="slider carousel slide">
<div class="carousel-inner" align="center">
<div class="item active">
<div style="display: flex;flex-direction:row; justify-content: center; align-items: center;">
<div><p style="font-family:'Aleo';color: #4e4c4a;font-size: 13vw;top:-30px;position:relative;">AR111</p><p style="font-family:'Aleo';color: #4e4c4a;font-size: 2vw;top:-80px;position:relative;">Description of the product enters here <br> approximately 2 lines</p></div>
<div style=""><img src="imagens/ar111.png" class="img-responsive"></div>
<div class="item">

<div class="item">
<a class="left carousel-control" href="#slider" data-slide="prev">
<span class="glyphicon glyphicon-circle-arrow-left"></span>
<a class="right carousel-control" href="#slider" data-slide="next">
<span class="glyphicon glyphicon-circle-arrow-right"></span>

And this is how i want the slider to look like in all screens.

Here's it live:

As you can see, it messes up depending on the screen resolution. I tried to use flexbox to give me more flexibility but still is not working. How can i accomplish the elements inside the slider to resize all together depending on the screen resolution?

dev dev

the styles that you are aplying on follwong two are breaking responsive ness

<div><p style=" font-family:'Aleo'; color: #4e4c4a; font-size: 1em;  top:-30px;  position:relative; ">AR111</p><p style=" font-family:'Aleo';  color: #4e4c4a;  font-size: 2vw;  top:-80px;  position:relative; ">Description of the product enters here <br> approximately 2 lines</p></div>

Do not use top:-80px; position:relative; and top:-30px; position:relative; as it is not responsive

try removing all your style in these two p block and see its working then apply styles one by one.