Home > Back-end >  how can this be responsive
how can this be responsive

Time：11-28

I tried 100% width but had no luck as it does not comply. anyone pls guide me. the swiper sometimes comes over the text it doesn't stay in the column. in mobile or tablet, I want them to be filling the screen with swiper slides and rest when you scroll down.in mobile view everything gets cut once i reach 528px any help in mobile i want it to look like shown in imagepreview

var galleryThumbs = new Swiper('.gallery-thumbs', {
          spaceBetween: 10,
          slidesPerView: 4,
          freeMode: true,
          watchSlidesProgress: true,
        });
        var galleryTop = new Swiper('.gallery-top', {
          spaceBetween: 10,
          navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
          },
          thumbs: {
            swiper: galleryThumbs
          }
        });
ul.breadcrumb {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    width: 568px;
    padding-left: 0;
}
ul.breadcrumb li {
    display: inline;
    font-size: 18px;
}
ul.breadcrumb li li:before {
    padding: 8px;
    color: black;
    content: "/\00a0";
}
ul.breadcrumb li a {
    color: #0275d8;
    text-decoration: none;
}
ul.breadcrumb li a:hover {
    color: #01447e;
    text-decoration: underline;
}
.product{
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
}
.page-container {
    display: grid;
    grid-template-columns: auto 622px;
    grid-column-gap: 21px;
    grid-row-gap: 10px;
}

.swiper-container {
    width: 538px;
    height: 725px;
}
.swiper {
    width: 100%;
    height: 300px;
    margin-left: auto;
    margin-right: auto;
}
  
.swiper-slide {
    background-size: cover;
    background-position: center;
}
  
.gallery-top {
    height: 78%;
    width: 100%;
}
  
.gallery-thumbs {
    margin-top: 6px;
    height: 18%;
    box-sizing: border-box;
    padding: 10px 0;
}
  
.gallery-thumbs .swiper-slide {
    width: 25%;
    height: 100%;
    opacity: 0.4;
}
  
.gallery-thumbs .swiper-slide-thumb-active {
    opacity: 1;
}

  
.box2 {
    background-color: yellow;
    min-width: 200px;
}
.product-title{
    font-size: 28px;
}
  
.box3 {
    background-color: blue;
    grid-row: 2;
    grid-column: 1 / span 3;
    min-height: 200px;
}
@media only screen and (max-width: 800px) {
  .page-container {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
  }
}
<script src="https://unpkg.com/swiper@7/swiper-bundle.min.js"></script>
<link href="https://unpkg.com/swiper@7/swiper-bundle.min.css" rel="stylesheet"/>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://unpkg.com/swiper@7/swiper-bundle.min.css"/>
</head>
<body>
    
    <div class="product">
        <div class="page-container"> <!-- Container -->
            <div class="swiper-container">
                <!-- Column 1 (Swiper) -->
                <!-- Swiper -->
                <div class="swiper gallery-top">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide" style="background-image:url(https://skylandtourism.com/wp-content/uploads/2018/03/Morning-Safari.jpg)"></div>
                        <div class="swiper-slide" style="background-image:url(https://skylandtourism.com/wp-content/uploads/2018/03/Morning-Safari.jpg)"></div>
                        <div class="swiper-slide" style="background-image:url(https://skylandtourism.com/wp-content/uploads/2018/03/Morning-Safari.jpg)"></div>
                        <div class="swiper-slide" style="background-image:url(https://skylandtourism.com/wp-content/uploads/2018/03/Morning-Safari.jpg)"></div>
                        <div class="swiper-slide" style="background-image:url(https://skylandtourism.com/wp-content/uploads/2018/03/Morning-Safari.jpg)"></div>
                    </div>
                    <!-- Add Arrows -->
                    <div class="swiper-button-next swiper-button-white"></div>
                    <div class="swiper-button-prev swiper-button-white"></div>
                </div>
                <div class="swiper gallery-thumbs">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide" style="background-image:url(https://skylandtourism.com/wp-content/uploads/2018/03/Morning-Safari.jpg)"></div>
                        <div class="swiper-slide" style="background-image:url(https://skylandtourism.com/wp-content/uploads/2018/03/Morning-Safari.jpg)"></div>
                        <div class="swiper-slide" style="background-image:url(https://skylandtourism.com/wp-content/uploads/2018/03/Morning-Safari.jpg)"></div>
                        <div class="swiper-slide" style="background-image:url(https://skylandtourism.com/wp-content/uploads/2018/03/Morning-Safari.jpg)"></div>
                        <div class="swiper-slide" style="background-image:url(https://skylandtourism.com/wp-content/uploads/2018/03/Morning-Safari.jpg)"></div>
                    </div>
                </div>
            </div>
            
            
            <!-- Column 2 (Details) -->
            <div class="box2">
                <ul class="breadcrumb">
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Desert Safari</a></li>
                    <li>Morning Safari</li>
                </ul>
                <h1 class="product-title">Morning Safari</h1>
                
            </div>
          
           
            <!-- Content that spans two rows -->
            <div class="box3">
                Content that spans two rows
            </div>
            
        </div>
    </div>
    <script src="https://unpkg.com/swiper@7/swiper-bundle.min.js"></script>
</body>
</html>
<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

So typically my approach, when I am faced with something like this, would be to add media queries and make sure that the page-container div is not a grid display in those queries. For example, what I would do is give it flex at a certain width and change the flex-direction from row to column, and align the items in the center. Using this flex-direction: column; is great for mobile devices.

var galleryThumbs = new Swiper('.gallery-thumbs', {
          spaceBetween: 10,
          slidesPerView: 4,
          freeMode: true,
          watchSlidesProgress: true,
        });
        var galleryTop = new Swiper('.gallery-top', {
          spaceBetween: 10,
          navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
          },
          thumbs: {
            swiper: galleryThumbs
          }
        });
ul.breadcrumb {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    width: 568px;
    padding-left: 0;
}
ul.breadcrumb li {
    display: inline;
    font-size: 18px;
}
ul.breadcrumb li li:before {
    padding: 8px;
    color: black;
    content: "/\00a0";
}
ul.breadcrumb li a {
    color: #0275d8;
    text-decoration: none;
}
ul.breadcrumb li a:hover {
    color: #01447e;
    text-decoration: underline;
}
.product{
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
}
.page-container {
    display: grid;
    grid-template-columns: auto 622px;
    grid-column-gap: 21px;
    grid-row-gap: 10px;
}

.swiper-container {
    width: 538px;
    height: 725px;
}
.swiper {
    width: 100%;
    height: 300px;
    margin-left: auto;
    margin-right: auto;
}
  
.swiper-slide {
    background-size: cover;
    background-position: center;
}
  
.gallery-top {
    height: 78%;
    width: 100%;
}
  
.gallery-thumbs {
    margin-top: 6px;
    height: 18%;
    box-sizing: border-box;
    padding: 10px 0;
}
  
.gallery-thumbs .swiper-slide {
    width: 25%;
    height: 100%;
    opacity: 0.4;
}
  
.gallery-thumbs .swiper-slide-thumb-active {
    opacity: 1;
}

  
.box2 {
    background-color: yellow;
    min-width: 200px;
}
.product-title{
    font-size: 28px;
}
  
.box3 {
    background-color: blue;
    grid-row: 2;
    grid-column: 1 / span 3;
    min-height: 200px;
}
  
@media only screen and (max-width: 800px) {
  .page-container {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
  }
}

@media only screen and (max-width: 550px) {
.swiper-container {
    width: 450px;
    height: 725px;
  }
}
<script src="https://unpkg.com/swiper@7/swiper-bundle.min.js"></script>
<link href="https://unpkg.com/swiper@7/swiper-bundle.min.css" rel="stylesheet"/>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://unpkg.com/swiper@7/swiper-bundle.min.css"/>
</head>
<body>
    
    <div class="product">
        <div class="page-container"> <!-- Container -->
            <div class="swiper-container">
                <!-- Column 1 (Swiper) -->
                <!-- Swiper -->
                <div class="swiper gallery-top">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide" style="background-image:url(https://skylandtourism.com/wp-content/uploads/2018/03/Morning-Safari.jpg)"></div>
                        <div class="swiper-slide" style="background-image:url(https://skylandtourism.com/wp-content/uploads/2018/03/Morning-Safari.jpg)"></div>
                        <div class="swiper-slide" style="background-image:url(https://skylandtourism.com/wp-content/uploads/2018/03/Morning-Safari.jpg)"></div>
                        <div class="swiper-slide" style="background-image:url(https://skylandtourism.com/wp-content/uploads/2018/03/Morning-Safari.jpg)"></div>
                        <div class="swiper-slide" style="background-image:url(https://skylandtourism.com/wp-content/uploads/2018/03/Morning-Safari.jpg)"></div>
                    </div>
                    <!-- Add Arrows -->
                    <div class="swiper-button-next swiper-button-white"></div>
                    <div class="swiper-button-prev swiper-button-white"></div>
                </div>
                <div class="swiper gallery-thumbs">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide" style="background-image:url(https://skylandtourism.com/wp-content/uploads/2018/03/Morning-Safari.jpg)"></div>
                        <div class="swiper-slide" style="background-image:url(https://skylandtourism.com/wp-content/uploads/2018/03/Morning-Safari.jpg)"></div>
                        <div class="swiper-slide" style="background-image:url(https://skylandtourism.com/wp-content/uploads/2018/03/Morning-Safari.jpg)"></div>
                        <div class="swiper-slide" style="background-image:url(https://skylandtourism.com/wp-content/uploads/2018/03/Morning-Safari.jpg)"></div>
                        <div class="swiper-slide" style="background-image:url(https://skylandtourism.com/wp-content/uploads/2018/03/Morning-Safari.jpg)"></div>
                    </div>
                </div>
            </div>
            
            
            <!-- Column 2 (Details) -->
            <div class="box2">
                <ul class="breadcrumb">
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Desert Safari</a></li>
                    <li>Morning Safari</li>
                </ul>
                <h1 class="product-title">Morning Safari</h1>
                
            </div>
          
           
            <!-- Content that spans two rows -->
            <div class="box3">
                Content that spans two rows
            </div>
            
        </div>
    </div>
    <script src="https://unpkg.com/swiper@7/swiper-bundle.min.js"></script>
</body>
</html>
<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

Page link：https//www.codepudding.com/Backend/208035.html

Prev:How to get the default calculation for certain equation after uncheck checkbox using JS
Next:Html-Css image stretched
  • Related

About Us:  Contact Us      Terms of Service       Privacy Policy

Copyright © 2010-2023，Powered By CodePudding