CODEWITHSUNDEEP
htmlcssionic-framework
kitsuneFox
kitsuneFox

Reputation: 1271

make a div screen size dependent

I'm working on an app with Ionic framework and I'm still a novice in css. I created a images slider with timer and but the size of it is fixed. However, I would like to change it to be depends on the screen size and resolution.

This is the html content:

<ion-content>
    <div class="container">
        <div id="content-slider">
            <div id="slider">
                <div id="mask">
                    <ul>
                        <li id="first" class="firstanimation">
                            <a href=#><img src="../img/coffe_and_sweet_sale.jpg"/></a>
                            <div class="tooltip"><h1>text 1</h1></div>
                        </li>
                        <li id="second" class="secondanimation">
                            <a href="#"><img src="../img/pizza_sale.png"/></a>
                            <div class="tooltip"><h1>text 2</h1></div>
                        </li>
                        <li id="third" class="thirdanimation">
                            <a href="#"><img src="../img/sandwich_sale.jpg"/></a>
                            <div class="tooltip"><h1>text 3</h1></div>
                        </li> 
                    </ul>
                </div>
            </div>
        </div>
    </div>
  </ion-content>

In the

style.css

I did something like that:

#slider{
    background: #000;
    border: 5px solid #eaeaea;
    box-shadow: 1px 1px 5px rgba(0,0,0,0.7);
    height: 320px;
    width: 680px; 
    margin: 40px auto 0;
    overflow: visible;
    position: relative;
}

#mask{
    overflow: hidden;
    height: 310px;
}

#slider ul{
    margin: 0;
    padding: 0;
    position: relative;
}

#slider li{
    width: 680px;
    height: 320px;
    position: absolute;
    top: -325px;
    list-style: none;
}

#slider img{
    width: 680px;
    height: 320px;
}

So now it shows the images perfectly but it it doesn't of course fit to any screen.

EDIT 1

I'm adding the style for the slider animation:

#slider li.firstanimation{
    animation: cycle 24s linear infinite;
}

#slider li.secondanimation{
    animation: cycletwo 24s linear infinite;
}
#slider li.thirdanimation{
    animation: cyclethree 24s linear infinite;
}

@keyframes cycle{
    0% {top: 0px;}
    3.33% {top: 0px;}
    26.64% {top:0px; opacity: 1; z-index: 0;}
    29.97% {top: 325px; opacity: 0; z-index: 0;}
    30.97% {top:-325px; opacity: 0; z-index: 0;}
    93.34% {top:-325px; opacity: 0; z-index: 0;}
    96.67% {top: -325px; opacity: 0; }
    100% {top: 0px; opacity: 1;}
}

@keyframes cycletwo{
    0% {top: -325px; opacity: 0;}
    26.64% {top: -325px; opacity: 0}
    29.97% {top:0px; opacity: 1;}
    33.3% {top: 0px; opacity: 1;}
    59.94% {top: 0px; opacity: 1; z-index: 0;}
    63.27% {top: 325px; opacity: 0; z-index: 0;}
    64.27% {top: -325px; opacity: 0; z-index: -1; }
    100% {top: -325px; opacity: 0; z-index: -1;}
}

@keyframes cyclethree{
    0% {top: -325px; opacity: 0;}
    59.94% {top: -325px; opacity: 0;}
    63.27% {top:0px; opacity: 1;}
    66.6% {top: 0px; opacity: 1;}
    93.24% {top: 0px; opacity: 1;}
    96.57% {top: 325px; opacity: 0; z-index: 0;}
    97.57% {top: -325px; opacity: 0; z-index: -1;}
    100% {top: -325px; opacity: 0; z-index: -1;}
}

#slider .tooltip{
    background: rgba(0,0,0,0.7);
    width: 450px;
    height; 60px;
    position: relative;
    bottom: 85px;
}

#slider .tooltip h1{
    color: #fff;
    font-size: 24px;
    font-weight: 300;
    line-height: 60px;
    padding: 0 0 0 10px;
}

#slider .tooltip {
    transition: all 0.3 ease-in-out;
}

Upvotes: 0

Views: 539

Answers (2)

a1626
a1626

Reputation: 2964

I've added one media query for the height. Here's a link for mediaquery if you want to change something.

As for slider i've fixed the issue now between third and first slide there is a blank slide. I was not sure if it is by design or not. Hope you can fix it if needed.

   #slider{
    background: #000;
    border: 5px solid #eaeaea;
    box-shadow: 1px 1px 5px rgba(0,0,0,0.7);
    height: 320px;
    width: 80%; 
    max-width: 680px;
    margin: 40px auto 0;
    overflow: visible;
    position: relative;
  }

  #mask{
    overflow: hidden;
    height: 310px;
  }

  #slider ul{
    margin: 0;
    padding: 0;
    height: 320px;
    width: inherit;
    position: relative;
  }

  #slider a{
    width: 100%;
    height: 100%;
  }  

  #slider li{
    width: inherit;
    height: 320px;
    position: absolute;
    top: 100px;
    list-style: none;
  }

  #slider img{
    width: 100%;
    height: 320px;
  }
  #slider li.firstanimation{
    animation: cycle 24s linear infinite;
  }

  #slider li.secondanimation{
    animation: cycletwo 24s linear infinite;
  }
  #slider li.thirdanimation{
    animation: cyclethree 24s linear infinite;
  }

  @keyframes cycle{
    0% {top: 0px;}
    3.33% {top: 0px;}
    26.64% {top:0px; opacity: 1; z-index: 0;}
    29.97% {top: 325px; opacity: 0; z-index: 0;}
    30.97% {top:-325px; opacity: 0; z-index: 0;}
    93.34% {top:-325px; opacity: 0; z-index: 0;}
    96.67% {top: -325px; opacity: 0; }
    100% {top: 0px; opacity: 1;}
  }

  @keyframes cycletwo{
    0% {top: -325px; opacity: 0;}
    26.64% {top: -325px; opacity: 0}
    29.97% {top:0px; opacity: 1;}
    33.3% {top: 0px; opacity: 1;}
    59.94% {top: 0px; opacity: 1; z-index: 0;}
    63.27% {top: 325px; opacity: 0; z-index: 0;}
    64.27% {top: -325px; opacity: 0; z-index: -1; }
    100% {top: -325px; opacity: 0; z-index: -1;}
  }

  @keyframes cyclethree{
    0% {top: -325px; opacity: 0;}
    59.94% {top: -325px; opacity: 0;}
    63.27% {top:0px; opacity: 1;}
    66.6% {top: 0px; opacity: 1;}
    93.24% {top: 0px; opacity: 1;}
    96.57% {top: 325px; opacity: 0; z-index: 0;}
    97.57% {top: -325px; opacity: 0; z-index: -1;}
    100% {top: -325px; opacity: 0; z-index: -1;}
  }

  #slider .tooltip{
    background: rgba(0,0,0,0.7);
    width: 60%;
    height; 60px;
    position: relative;
    bottom: 85px;
  }

  #slider .tooltip h1{
    color: #fff;
    font-size: 24px;
    font-weight: 300;
    line-height: 60px;
    padding: 0 0 0 10px;
  }

  #slider .tooltip {
    transition: all 0.3 ease-in-out;
  }

  @media screen and (max-height: 380px){
    #slider{
      height: 200px;
    }

    #mask{
      height:190px;
    }

    #slider img{
      height:190px;
    }

    #slider li{
      height:190px;
    }

    #slider ul{
      height:190px;
    }

    #slider .tooltip{
      bottom: 80px;
    }        
  }

Upvotes: 1

undefinedtoken
undefinedtoken

Reputation: 931

Change 

#slider img{
  max-width:100%;
  display:block;
  width:100%;
}

Remove absolute values of your image.

Upvotes: 1

Related Questions