CODEWITHSUNDEEP
javascriptjqueryhtmlcss
JohnA
JohnA

Reputation: 636

Webpage Resize Autofit HTML Simple

So I just got done making my first JQuery project which is a simple full width slider. (Getting back to HTML & CSS & im currently working in C#)

Here is the issue; I dont want to be able to scroll on the page I want it to be autofit to the webpage.

Lets say I open the webpage right now, I want resize it how ever I want its responsive & its working like a charm. but you can still scroll down. (Feel free to try it yourself with my code)

I remember this being really simple to fix but for some reason I cant remember how I did it back in the day. I'm pretty sure I will have to change something with the height; it in the CSS file or inside the body of the HTML source.

Here is the fiddle

My CSS file is completly empty.

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Full Width Responsive Image Slider</title>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
  <script src="http://malsup.github.com/jquery.cycle2.js"></script>
  <style type="text/css">
*{padding: 0; margin: 0;}
body {font-family: Sans-Serif;}
img {max-width: 100%;}
.cycle-slideshow {
    width: 100%;
    display: block;
    position: relative;
    margin: 0 auto;

}
.cycle-prev, .cycle-next {
    font-size: 200;
    color: #FFF;
    display: block;
    position: absolute;
    top: 50%;
    margin-top: -16px;
    z-index: 9999;
    cursor: pointer;

}

.cycle-prev {left: 10%;}
.cycle-next{right: 10%;}


.cycle-pager{
    width: 100%;
    text-align: center;
    display: block;
    position: absolute;
    position: top;
    bottom: 20px;
    z-index: 9999;
}

.cycle-pager span {
    text-indent: 100%;
    white-space: nowrap;;
    width: 12px;
    height: 12px;
    display: inline-block;
    border: 1px solid #FFF;
    border-radius: 50%;
    margin: 0 10px;
    cursor: pointer;

}
.cycle-pager .cycle-pager-active {background: #FFF;}

  </style>
</head>



<body>

<div class="container">

<!-- Full Width Responsive Slider -->

  <div class="cycle-slideshow">
    <span class="cycle-prev">&#9001;</span>
    <span class="cycle-next">&#9002;</span>
    <span class="cycle-pager"></span>
    <img src="images/Untitled.png">
    <img src="images/wp.png">
    <img src="images/wp2.png">
  </div>

<!-- Full Width Responsive Slider -->


</body>
</html>

Upvotes: 1

Views: 1726

Answers (1)

Dinwy
Dinwy

Reputation: 124

try this code.

html,body,img {padding: 0; margin: 0;height:100%;width:100%}
body {font-family: Sans-Serif;}

.container{height:100%;width:100%;overflow: hidden;}
.cycle-slideshow {
    height: 100%;

where

*{padding: 0; margin: 0;}
body {font-family: Sans-Serif;}
img {max-width: 100%;}
.cycle-slideshow {

and if you want to change the size, just change .container

Upvotes: 1

Related Questions