Jonhz Jonhz - 1 year ago 89
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
Answer Source

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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download