0

I have tried to make it responsive but it appears like the image I shared.I used bootstraps owl carousel to make image-slider it doesn't fit to screens larger or smaller than my laptop.I make containers and they are also not responsive even the footer moves here and there and is not stickyI tried everyway to make these 3 things appear responsive at a same time but I can't do that.It also has css.min CSS file. This is what it is showing when I check responsiveness

*{
    padding: 0;
    margin: 0;
    
    box-sizing: border-box;
}
html{
    height: 100%;

}
.body{
    display: flex;
    min-height: 100%;

}

.container1{
    position: relative;
    width:1500px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    padding: 30px;
    margin-top: 8%;
    
    
}
.container1 .card1{
    background: rgb(70, 218, 203);
    width: 308px;
    position: relative;
    height: 400px;
    margin: 30px 20px;
    padding: 20px 15px;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    box-shadow: 0.5px 10px rgb(0, 217, 255);
    transition: 0.3s ease-in-out;
    margin-top: 5%;
    
}
.container1 .card1 .imgbx{
    position: relative;
    width: 260px;
    height: 260px;
    top: -80px;
    left:20px;
    box-shadow: 0 5px 20px rbga(0,0,0,1.2);
    
}

.container1 .card1 .imgbx img{
    max-width: 100%;
    margin-left: 20px;
    border-radius: 10px;
    padding-top: 20px;
    
}

.imgbx:hover img{
    transform:scale(1.1);
    
}






.navbar{
    background-color: #30d5b9dc !important;
}
.navbar .navbar-brand{
    color: white;
    font-size: 30px;
    font-family: 'Times New Roman', Times, serif;
}
.navbar .navbar-nav li a{
    color:white !important;
    float: left;
}
.navbar-toggler{
    background-color: black !important;
}

.owl-carousel .item{
    margin-top: 70px ;
    padding-top: 900px;
    position: absolute;
    margin: 170;
    font-size: 24px;
    text-align: center;
    margin-top: 50px;;
}
       
.owl-next{
    float:right;
}
.owl-prev{
    float:left;
}       
.owl-prev span{
        font-size: 24px;
        font-weight: bold;
}
.owl-next span{
        font-size: 24px;
        font-weight: bold;
}
.footer1 {
    padding: 50px 0;
    background-color: #30d5b9dc;
    height:auto;
    bottom:0;
    padding: 2px 0px 5px 0px;
    position: absolute;
    
  
}
.social {
    text-align: center;
    
    
    
    

}
.footer1 .social a {
    font-size: 24px;
    text-align: center;
    border-radius: 50%;
    margin: 0 8px;
    
    opacity: 0.75;
}
.footer1 .social a:hover{
    opacity: 0.9;
}
.copyright{
  text-align: center;
}
owl.carousel.min.css code
/**
 * Owl Carousel v2.3.4
 * Copyright 2013-2018 David Deutsch
 * Licensed under: SEE LICENSE IN https://github.com/OwlCarousel2/OwlCarousel2/blob/master/LICENSE
 */
 .owl-carousel,.owl-carousel .owl-item{-webkit-tap-highlight-color:transparent;position:absolute}.owl-carousel{display:none;width:100%;z-index:1}.owl-carousel .owl-stage{position:relative;-ms-touch-action:pan-Y;touch-action:manipulation}.owl-carousel .owl-stage:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0}.owl-carousel .owl-stage-outer{position:relative;overflow:hidden}.owl-carousel .owl-item{min-height:1px;float:left;-webkit-touch-callout:none}.owl-carousel .owl-item img{display:block;width:100%}.owl-carousel .owl-dots.disabled,.owl-carousel .owl-nav.disabled{display:none}.no-js .owl-carousel,.owl-carousel.owl-loaded{display:block}.owl-carousel .owl-dot,.owl-carousel .owl-nav .owl-next,.owl-carousel .owl-nav .owl-prev{cursor:pointer;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.owl-carousel .owl-nav button.owl-next,.owl-carousel .owl-nav button.owl-prev,.owl-carousel button.owl-dot{background:0 0;color:inherit;border:none;padding:0!important;font:inherit}.owl-carousel.owl-loading{opacity:0;display:block}.owl-carousel.owl-hidden{opacity:0}.owl-carousel.owl-refresh .owl-item{visibility:hidden}.owl-carousel.owl-drag .owl-item{-ms-touch-action:pan-y;touch-action:pan-y;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.owl-carousel.owl-grab{cursor:move;cursor:grab}.owl-carousel.owl-rtl{direction:rtl}.owl-carousel.owl-rtl .owl-item{float:right}.owl-carousel .animated{animation-duration:1s;animation-fill-mode:both}.owl-carousel .owl-animated-in{z-index:0}.owl-carousel .owl-animated-out{z-index:1}.owl-carousel .fadeOut{animation-name:fadeOut}@keyframes fadeOut{0%{opacity:1}100%{opacity:0}}.owl-height{transition:height .5s ease-in-out}.owl-carousel .owl-item .owl-lazy{opacity:0;transition:opacity .4s ease}.owl-carousel .owl-item .owl-lazy:not([src]),.owl-carousel .owl-item .owl-lazy[src^=""]{max-height:0}.owl-carousel .owl-item img.owl-lazy{transform-style:preserve-3d}.owl-carousel .owl-video-wrapper{position:relative;height:100%;background:#000}.owl-carousel .owl-video-play-icon{position:absolute;height:80px;width:80px;left:50%;top:50%;margin-left:-40px;margin-top:-40px;background:url(owl.video.play.png) no-repeat;cursor:pointer;z-index:1;transition:transform .1s ease}.owl-carousel .owl-video-play-icon:hover{-ms-transform:scale(1.3,1.3);transform:scale(1.3,1.3)}.owl-carousel .owl-video-playing .owl-video-play-icon,.owl-carousel .owl-video-playing .owl-video-tn{display:none}.owl-carousel .owl-video-tn{opacity:0;height:100%;background-position:center center;background-repeat:no-repeat;background-size:contain;transition:opacity .4s ease}.owl-carousel .owl-video-frame{position:relative;z-index:1;height:100%;width:100%}
{% extends 'base.html' %}
{% load static %}
{% block title %}Home{% endblock title %}


{% block banner_slider %}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="{% static 'css/style.css' %}">
<!--Banner Slider-->
 <div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="{% static 'images/banner/pi.jpg' %}" class="d-block img-fluid" alt="..."> 
    </div>
    <div class="carousel-item">
      <img src="{% static 'images/banner/li.jpg' %}" class="d-block img-fluid" alt="...">
    </div>
    <div class="carousel-item">
      <img src="{% static 'images/banner/pie.jpg' %}" class="d-block img-fluid" alt="...">
    </div>
    
  </div>
  <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </a>
</div>
<!-- End Banner Slider -->
{% endblock banner_slider %}
{% block main-content %}
<!-- 1st Product Slider -->
<div class="container1">
  <div class="card1">
    <div class="imgbx">
    <a href="#">
    <img src="{% static 'images/banner/rew.png' %}">
    </a>
    </div>
  </div>
  <div class="card1">
    <div class="imgbx">
    <a href="#">
    <img src="{% static 'images/banner/newi.png' %}">
    </a>
    </div>
  </div>
  <div class="card1">
    <div class="imgbx">
    <a href="#">
    <img src="{% static 'images/banner/eei.png' %}">
    </a>
    </div>
  </div>
</div>

   

{% endblock main-content %}
Hania Hafeez Khan
  • 11
  • 5
  • Owl Carousel has its own responsive rules, see: https://owlcarousel2.github.io/OwlCarousel2/demos/responsive.html or you can use general CSS media queries: https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries Either way, you'll need to add something to trigger the format changes necessary when the screen size changes. – AStombaugh Apr 21 '22 at 23:53
  • Hey, I have tried every css property but it didn't work – Hania Hafeez Khan Apr 27 '22 at 17:35

0 Answers0