دوست عزیز قالب وب سایت شما کاملا واکنش گرا (ریسپانسیو) هست نباید همچین اندازه هایی رو قرار داد!
توی کد های زیر از % استفاده شده و کاملا ریسپانسیو هست!!
خب برای حل این مشکل
به مسیر زیر بروید
کد:
.../components/com-jshopping/css
فایل jquery.lightbox.css را باز کرده و آی دی زیر را جستجو کنید (خط 36)
کد:
#lightbox-container-image-data-box
خصوصیات فعلی این آی دی به صورت زیر است :
کد:
#lightbox-container-image-box {
position: relative;
background-color: #fff;
width: 250px;
height: 250px;
margin: 0 auto;
}
این قسمت را با کد زیر جایگزین کنید
کد:
#lightbox-container-image-box {
position: relative;
background-color: #fff;
width:100% !important;
max-width: 500px;
margin: 0 auto;
}
خب برای اینکه قسمت پایین عکس داخل اسلایدشو با کادر عکس مساوی بشه توی همین فایل آی دی زیر را جستجو کنید (خط 77)
کد:
#lightbox-container-image-data-box
خصوصیات فعلی این آی دی به صورت زیر است :
کد:
#lightbox-container-image-data-box {
font: 10px Verdana, Helvetica, sans-serif;
background-color: #fff;
margin: 0 auto;
line-height: 1.4em;
overflow: auto;
width: 100%;
padding: 0 10px 0;
}
این قسمت را با کد زیر جایگزین کنید
کد:
#lightbox-container-image-data-box {
font: 10px Verdana, Helvetica, sans-serif;
background-color: #fff;
margin: 0 auto;
line-height: 1.4em;
overflow: auto;
width: 100% !important;
max-width: 480px;
padding: 0 10px 0;
}
دوست عزیز توی قسمت اول بیشترین عرض برای تصویر 500 پیکسل و توی قسمت دوم که همون کادر پایین عکس هست عرض رو 480 پیکسل تنظیم کردم. (480 بخاطر اینه که اون کادر از 2 طرف به اندازه 20 پیکسل گرفته شده {padding: 0 10px 0;} )
میتونید اندازه دلخواهتون رو بهش بدید ولی پیشنهاد میشه بیشتر از 600 پیکسل نباشه....!
موفق باشید