I have implemented owl carousel on my website for sliding the container. While the slider functions correctly, I encounter issues when minimizing the screen or viewing it on different monitors or browsers.
The problem lies in the fact that the code is not consistent across all web applications and screen sizes.
Due to varying browser sizes and monitor resolutions, the container size fluctuates. Can anyone provide guidance on how to address this?
<div class="container" style= "background-color: #DCDCDC;">
<div class="country-name">Countries</div>
<div class= "owl-carousel own-theme" style="padding-bottom: 15px;">
<div class="column-about">
<div class="country-list">Opportunities?</div>
<div id="MyDIV">
The range of courses offered at universities is vast and lets you choose your area of interest <a href="listofcountries.html#anchor-name" class="more_btn__block">More<i class="fa fa-angle-right"></i></a>
</div>
</div>
<div class="column-about">
<div class="country-list">Opportunities?</div>
<div id="MyDIV">
rsities worldwide offer modern education and a welcoming atmosphere <a href="listofcountries.html#netherland-name" class="more_btn__block">More<i class="fa fa-angle-right"></i></a>
</div>
</div>
<div class="column-about">
<div class="country-list">Opportunities?</div>
<div id="MyDIV">
One of the most popular destinations for higher education with numerous students graduating annually <a href="listofcountries.html#uk-name" class="more_btn__block">More<i class="fa fa-angle-right"></i></a>
</div>
</div>
<div class="column-about">
<div class="country-list">Opportunities?</div>
<div id="MyDIV">
Europe's top-notch higher education system providing excellent career prospects to students <a href="listofcountries.html#france-name" class="more_btn__block">More<i class="fa fa-angle-right"></i></a>
</div>
</div>
<div class="column-about">
<div class="country-list">Opportunities?</div>
<div id="MyDIV">
Offering some of the best University Programs globally, making it a prime destination for education <a href="listofcountries.html#sweden-name" class="more_btn__block">More<i class="fa fa-angle-right"></i></a>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$('.owl-carousel').owlCarousel({
loop: true,
margin: 10,
dotsContainer: true,
nav: true,
autoplay: true,
autoplayTimeout: 2000,
autoplayHoverPause: true,
responsive: {
0: {
items: 1
},
300: {
items: 1
},
600: {
items: 3
},
1000: {
items: 5
},
1600: {
items: 5
}
}
});
function adjustAlignment() {
document.getElementById("myDIV").style.MozTextAlignLast = "right";
document.getElementById("myDIV").style.textAlignLast = "right";
}
</script>