I have a Bootstrap Carousel working nicely in Kentico CMS, except for the mobile view. Despite adding the tag of img-fluid, the image on mobile is just a sized down version of the banner on the desktop view. What I would really like to do is to add a separate image for smaller screens.
Any ideas?
<div class="item <%# Eval("HomeSliderActive")%>">
<img src="<%# Eval("HomeSliderImage") %>" alt="<%# Eval("HomeSliderHeading")%>" class="img-fluid "/>
<div class="carousel-caption no-mobile headings">
<a href="<%# Eval("HomeSliderURLTarget") %>">
<div class="outer">
<div class="inner-absolute-top">
<h3><%# Eval("HomeSliderHeading")%></h3>
</div>
<div class="inner-absolute-bottom">
<p><%# Eval("HomeSliderCaption")%> <span><%# Eval("HomeSliderButton")%></span></p>
</div>
</div> </a>
</div>
</div>