چگونگی رسپانسیو کردن کد های css مربوط به اسلاید شو

[funpatogh]

سلام خسته نباشید
یک اسلایدشو دارم که رسپانسیو نیست و با موبایل خراب نشان میده این کدهای css هست کسی میتونه کمک کنه که چه تغییراتی باید توش بدم که رسپانسیو بشه




#slide_wrapper{
width:562px; margin:0px 0px;
height:210px;
}

#slide_container {
position:relative;
padding:5px;
}

.sliderbutton {
float:left;
width:25px;
height:235px;
cursor:pointer;
}

#slideleft {
background: url(img/left.png) no-repeat center;
}

#slideleft:hover {
background: url(img/left_hover.png) no-repeat center;
}

#slideright {
background:url(img/right.png) no-repeat center;
}

#slideright:hover {
background:url(img/right_hover.png) no-repeat center;
}

#slider {
float:left;
position:relative;
overflow:auto;
width:558px;
height:235px;
}

#slider img{
height: 235px
}

#slider ul {
position:absolute;
list-style:none;
top:0; left:0;
padding: 0px
}

#slider li {
float:left;
width:558px;
height:235px;
}

div.descript_slide{
background: #000000;
opacity: 0.6;
padding: 8px;
position: absolute;
text-align: center;
color: #FFFFFF;
width: 558px;
text-shadow: 1px 1px #333333;
}

.pagination {
position:absolute;
list-style:none;
height:25px;
padding-left: 30px;
padding-right: 100px;
padding-top: 10px
}

.pagination li {
float:left;
cursor:pointer;
height:8px;
width:8px;
background:#ccc;
margin:0 4px 0 0;
border:1px solid #FFFFFF;
-moz-border-radius: 1px;
}

.pagination li:hover, li.current {
background:#fff;
}

[hamidre13]

اگر خود اسلایدر رو بزاری راحتتر میشه جواب داد. فک میکنم اگه خط ۳۸-۳۹ رو عوض کنی باید مشکلت حل شه.


width:100%;
height:235px;

[funpatogh]

بفرمایید این لینک یک نمونش که گذاشتم توی صفحه که ببینید
http://funpatogh.com/slide/




<div id='slide_wrapper'>
<div id='slide_container'>
<div class='sliderbutton' id='slideleft' onclick='slideshow.move(-1)'></div>

<div id='slider'>
<ul>
<li>
<a href="http://www.yahoo.com">
<img src="http://wpmu.org/wp-content/uploads/2013/10/slide-deck-2-plugin.png" width="500" height="200" alt="Naqsh-e Rustam" /></a>
</li>
<li>
<a href="http://www.google.com">
<img src="http://farishtheme.ir/wp-content/uploads/2015/08/wordpress-plugin-masterslider-1.jpg" width="500" height="200" alt="Pasargadae" /></a>
</li>
<li>
<a href="http://en.wikipedia.org/wiki/Rostam">
<img src="http://www.funpatogh.com/wp-content/plugins/tinyslider/img/rostam.jpg" width="500" height="200" alt="Rostam" /></a>
</li>
<li>
<a href="http://bs.wikipedia.org/wiki/Cyrus_Veliki">
<img src="http://www.funpatogh.com/wp-content/plugins/tinyslider/img/persia_cyrus2_world3.jpg" width="500" height="200" alt="Cyrus Veliki" /></a>
</li>
</ul>
</div>
<div class='sliderbutton' id='slideright' onclick='slideshow.move(1)'></div>
<ul id='pagination' class='pagination'>
<li onclick='slideshow.pos(0)'></li>
<li onclick='slideshow.pos(1)'></li>
<li onclick='slideshow.pos(2)'></li>
<li onclick='slideshow.pos(3)'></li>
</ul>
</div>
</div>
<script type='text/javascript'>
var slideshow=new TINY.slider.slide('slideshow',{
id:'slider',
auto:3,
resume:false,
vertical:false,
navid:'pagination',
activeclass:'current',
position:0,
rewind:false,
elastic:true,
left:'slideleft',
right:'slideright'
});
</script>

[funpatogh]

کسی نمیتونه کمک کنه؟

[tamafi6]

دوست عزیز متاسفانه کلیه کدنویسی شمااشتباه هست ودرست استایل نویسی نکردیدیا ازنو بایدبنویسید ویا ازنمونه های آماده استفاده کنید.
یک نمونه :


.slideshow{
clear:both;
margin:0;
padding:0;
width:auto;
height:auto;
overflow:hidden;
}
.slideshow li{
list-style-type:none;
margin:0;
padding:0;
float:left;
display:block;
}


.bx-wrapper img {
width: 100%;
display: block;
}



کنترل هارابه این روش بنویسید


.bx-wrapper .bx-controls-direction a {
position: absolute;
top: 50%;
margin-top: -16px;
outline: 0;
width: 32px;
height: 32px;
text-indent: 3333px;
z-index: 9999;
}

ازکلاس های مدیاکویری هم استفاده کنید


@media all and (min-width: 480px) and (max-width: 768px) {
.grid *[class*="col_"]{
float:none;
width:auto;
clear:both;
display:block;
}
.grid *[class*="col_"] [class*="col_"]{
margin-left:0;
margin-right:0;
width:100%;
}

بلوک بندی رادرست انجام بدید

.col_1 { width: 6.6666666666667%; }
.col_2 { width: 15%; }
.col_3 { width: 23.333333333333%; }
.col_4 { width: 31.666666666667%; }
.col_5 { width: 40%; }
.col_6 { width: 48.333333333333%; }
.col_7 { width: 56.666666666667%; }
.col_8 { width: 65%; }
.col_9 { width: 73.333333333333%; }
.col_10 { width: 81.666666666667%; }
.col_11 { width: 90%; }
.col_12 { width: 98.333333333333%; }

[دانیال دزفولی]

توی این تاپیک یه اسلایدر معرفی کردم
از اون استفاده کن

http://barnamenevis.org/showthread.php?513432-%D9%88%D8%A8%D8%B3%D8%A7%DB%8C%D8%AA-%D9%87%D8%A7%DB%8C-%DA%A9%D8%A7%D8%B1%D8%A8%D8%B1%D8%AF%DB%8C-%D8%AF%D8%B1-%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-%D9%88%D8%A8

[funpatogh]

مشکل اینحاست عزیز که اسلایدر توی وردپرس به صورت پلاگین باید نصب بشه و زیاد نمیشه روش مانور داد
اون کد ها هم که دادم ماله یک پلاگین اسلایدر بود و من کدنویسی براش نکردم