Как сделать так, чтобы он выглядел одинаково во всех браузерах и на разных размерах экрана? - PullRequest
Новая
       64

Как сделать так, чтобы он выглядел одинаково во всех браузерах и на разных размерах экрана?

0 голосов
/ 06 мая 2020

Я использую карусель совы для перемещения контейнера на моем веб-сайте. Ползунок работает правильно, проблема возникает только после сворачивания экрана или если я проверю это на другом мониторе или в другом браузере.

По сути, приведенный ниже код не одинаков для всех веб-приложений и размеров экрана.

Размер контейнера зависит от всех браузеров и разных размеров монитора. Может ли кто-нибудь направить меня сюда? 

<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 the universities is vast and gives you the opportunity to choose the area<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 in the world with a modern approach to education and a welcoming<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">
                Theopular destinations to study higher education, with more than 500,000 students e education degrees and the qualifications are recognised by employers<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">Opportunitie?</div>
            <div id="MyDIV">
                higher education system is one of the best in Europe with a good career opportunities. Students attending a<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">
                Universitee Programs in the world. University i<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 myFunction() {
    document.getElementById("myDIV").style.MozTextAlignLast = "right"; 
    document.getElementById("myDIV").style.textAlignLast = "right";
}
</script>

1 Ответ

0 голосов
/ 06 мая 2020

Вы определили 

<meta name="viewport" content="width=device-width, initial-scale=1.0">

в своей головной части?

...