html css mobile

kadir koçaslan 65 Reputation points
2023-03-29T12:55:00.27+00:00 
  <section class="kaydirma">
            <div class="swiper mySwiper container">
                <div class="swiper-wrapper content">
                    <div class="swiper-slide card">
                        <div class="card-content">
                            <div class="image">
                                <img src="../images/clio.jpg" alt="" />
                            </div>
                            <div class="name-profession">
                                <span class="name">CLİO</span>
                            </div>
                            <div class="button">
                                <button class="aboutMe">KATOLOG İÇİN TIKLAYINIZ</button>
                                <button class="hireMe">FİYAT TEKLİFİ ALINIZ</button>
                            </div>
                        </div>
                    </div>
                    <div class="swiper-slide card">
                        <div class="card-content">
                            <div class="image">
                                <img src="../images/megane.jpg" alt="">
                            </div>
                            <div class="name-profession">
                                <span class="name">MEGANE</span>
                            </div>
                            <div class="button">
                                <button class="aboutMe">KATOLOG İÇİN TIKLAYINIZ</button>
                                <button class="hireMe">FİYAT TEKLİFİ ALINIZ</button>
                            </div>
                        </div>
                    </div>
                    <div class="swiper-slide card">
                        <div class="card-content">
                            <div class="image">
                                <img src="../images/captur.jpg" alt="">
                            </div>
                            <div class="name-profession">
                                <span class="name">CAPTUR</span>
                            </div>
                            <div class="button">
                                <button class="aboutMe">KATOLOG İÇİN TIKLAYINIZ</button>
                                <button class="hireMe">FİYAT TEKLİFİ ALINIZ</button>
                            </div>
                        </div>
                    </div>
                    <div class="swiper-slide card">
                        <div class="card-content">
                            <div class="image">
                                <img src="../images/megane.jpg" alt="" />
                            </div>
                            <div class="name-profession">
                                <span class="name">MEGANE</span>
                            </div>
                            <div class="button">
                                <button class="aboutMe">KATOLOG İÇİN TIKLAYINIZ</button>
                                <button class="hireMe">FİYAT TEKLİFİ ALINIZ</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="swiper-button-next"></div>
            <div class="swiper-button-prev"></div>
            <div class="swiper-pagination"></div>
        </section>

hi guys i have these codes but these codes are not mobile compatible help please

ASP.NET
ASP.NET
A set of technologies in the .NET Framework for building web applications and XML web services.
3,245 questions
C#
C#
An object-oriented and type-safe programming language that has its roots in the C family of languages and includes support for component-oriented programming.
10,203 questions
Accepted answer
  1. Lan Huang-MSFT 25,386 Reputation points Microsoft Vendor
    2023-04-05T08:22:08.4433333+00:00

    Hi @kadir koçaslan,

    hi guys i have these codes but these codes are not mobile compatible help please

    What does incompatible mobile device mean? Code not working? You only provided the html code. Should you be using @media on mobile? https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries I noticed that you use the swiper library, I wrote a demo you can refer to.

    <html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
     <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.5/js/swiper.min.js"></script>
    <link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.5/css/swiper.css" />
    <!-- Demo styles -->
    <style type="text/css">
        html, body
        {
            position: relative;
            height: 100%;
        }
        body
        {
            background: #eee;
            font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
            font-size: 14px;
            color: #000;
            margin: 0;
            padding: 0;
        }
        .swiper-container
        {
            width: 100%;
            height: 200px;
        }
        .swiper-slide
        {
            text-align: center;
            font-size: 18px;
            background: #fff; /* Center slide text vertically */
            display: -webkit-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            -webkit-justify-content: center;
            justify-content: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            -webkit-align-items: center;
            align-items: center;
        }
    </style>
   
</head>
<body>
    <form id="form1" runat="server">
      <section class="kaydirma">
            <div class="swiper-container">
                <div class="swiper-wrapper content">
                    <div class="swiper-slide card">
                        <div class="card-content">
                            <div class="image">
                                <img src="wave.PNG" alt="" />
                            </div>
                            <div class="name-profession">
                                <span class="name">CLİO</span>
                            </div>
                            <div class="button">
                                <button class="aboutMe">KATOLOG İÇİN TIKLAYINIZ</button>
                                <button class="hireMe">FİYAT TEKLİFİ ALINIZ</button>
                            </div>
                        </div>
                    </div>
                    <div class="swiper-slide card">
                        <div class="card-content">
                            <div class="image">
                                <img src="wave.PNG" alt=""/>
                            </div>
                            <div class="name-profession">
                                <span class="name">MEGANE</span>
                            </div>
                            <div class="button">
                                <button class="aboutMe">KATOLOG İÇİN TIKLAYINIZ</button>
                                <button class="hireMe">FİYAT TEKLİFİ ALINIZ</button>
                            </div>
                        </div>
                    </div>
                    <div class="swiper-slide card">
                        <div class="card-content">
                            <div class="image">
                                <img src="wave.PNG" alt=""/>
                            </div>
                            <div class="name-profession">
                                <span class="name">CAPTUR</span>
                            </div>
                            <div class="button">
                                <button class="aboutMe">KATOLOG İÇİN TIKLAYINIZ</button>
                                <button class="hireMe">FİYAT TEKLİFİ ALINIZ</button>
                            </div>
                        </div>
                    </div>
                    <div class="swiper-slide card">
                        <div class="card-content">
                            <div class="image">
                                <img src="wave.PNG" alt="" />
                            </div>
                            <div class="name-profession">
                                <span class="name">MEGANE</span>
                            </div>
                            <div class="button">
                                <button class="aboutMe">KATOLOG İÇİN TIKLAYINIZ</button>
                                <button class="hireMe">FİYAT TEKLİFİ ALINIZ</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="swiper-button-next"></div>
            <div class="swiper-button-prev"></div>
            <div class="swiper-pagination"></div>
        </section>
         <script type="text/javascript">
             var swiper = new Swiper('.swiper-container', {
                 spaceBetween: 30,
                 centeredSlides: true,
                 autoplay: false,
                 pagination: {
                     el: '.swiper-pagination',
                     clickable: true
                 },
                 navigation: {
                     nextEl: '.swiper-button-next',
                     prevEl: '.swiper-button-prev'
                 }
             });
             $(".swiper-container").mouseenter(function () {
                 swiper.autoplay.start();
             });
             $(".swiper-container").mouseleave(function () {
                 swiper.autoplay.stop();
                 swiper.slideTo(0); // 0 is the index number of slide.
             });
         </script>
    </form>
</body>
</html>

    14

    Best regards,
    Lan Huang

    If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
    Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

    0 comments

1 additional answer

Sort by: Most helpful
Most helpful Newest Oldest
  1. Bruce (SqlWork.com) 55,041 Reputation points
    2023-03-29T15:26:12.31+00:00

    Showing us some class names does not tell us much. We would need the css and JavaScript behind then.

    It looks like you are using swiperjs classes, which do support mobile. Did you include the css links, JavaScript links, and startup code?

    What do you mean by not working?

    0 comments