رفتن به مطلب

مشکل در مدیا کوئری ها


پست های پیشنهاد شده

با سلام و عرض خسته نباشید خدمت استانید محترم. مشکلی در رابطه با طراحی Responsive قالب سایتم رخ داده که میخواستم با کمک شما حلش کنم:

مشکل اینجاست که بنده سعی کردم با استفاده از مدیا کوئری ها برای هر نمایشگر مختلف یک نمای متفاوت درست کنم اما متاسفانه فقط Media Query اول که از 981px شروع میشه کار میکنه و بقیه آن ها (600px به پایین) کار نمی کنن! یعنی چه با تبلت 600px ای و چه با موبایل 300px ای برای بازم کد های داخل مدیا اول نمایش داده میشه.

لطفا راهنمایی کنید

با تشکر


@media only screen and (max-width:981px)
{
.wrapper
{
width:97%
}
.slider-footer-block-small-title , .whyus img , .content-title ul li:last-child , .admin-img img , .wmle_post_title , .numbers , .responsive , .main-menu , .menu ul img , .order-form img
{
display:none !important
}
.circle
{
width:500px !important;
float:none !important;
margin-right:10%
}
.chart-one , .chart-two
{
width:100%
}
.design
{
height:auto
}
.slider-footer-social
{
position:relative;
right:0%
}
.slider-footer:after
{
margin-top:-200px
}
.MyTicker
{
width:35%
}
.parallax
{
margin-top:250px;
}
.admin-titles
{
width:100%
}
.content-title ul li
{
width:45%
}
.info-des
{
padding:40px 20px 0 0
}
.order
{
width:75%
}
.content-title
{
width:100% !important
}
.whyus
{
margin-bottom:0 !important
}
.whyus img
{
margin:0 35%;
float:none;
}
.midd-bar
{
font-size:19px;
line-height:5
}
.midd-bar-block p
{
width:85%
}
.midd-bar-block a
{
width:70%
}
.support-info
{
margin:50px -40px;
width:70%
}
.sites-footer
{
width:100%
}
.sites-footer a
{
width:48%
}
.dastresi
{
width:100%
}
.copyright
{
height:auto
}
.slideshow
{
margin-top:15px;
border-top:1px solid #EEE
}
.menu
{
width: 100%;
text-align:right;
border-top:none;
height:0;
margin:0;
}
.site-menu
{
width:40%;
position:fixed;
box-shadow:0 0 10px 1px #EEE;
border:1px solid #EEE;
border-top:none;
background:white;
right:-35%;
top:12.4%;
display:none;
z-index:999
}
.site-menu i
{
background:#FFF;
padding:5px;
float:right
}
.menu ul li , .menu1
{
width:100%;
background:#FFF;
border-top:1px solid #f8f8f8;
border-left:none
}
.menu ul li a:hover
{
background:inherit !important;
color:#12ADD5
}
.menu ul li i
{
float:left
}
.menu ul li a
{
width:100%
}
.arrow-dw
{
position:relative;
float:left;
margin:3px 0 0 0;
}
.menu ul ul
{
position:relative;
top:0;
margin-top:10px;
border-left:none !important;
right:0;
left:0;
width:100%;
box-shadow:none
}
.menu-2
{
width:100% !important;
box-shadow:none !important
}
.responsive-btn
{
padding:10px ;
background:#FFF;
border:1px solid #ECF0F1;
box-shadow:0 0 10px 1px #ECF0F1;
position:fixed;
cursor:pointer;
top:6%;
display:block;
z-index:999999999999999;
}
.logo-img
{
float:none
}
.logo
{
text-align:center
}
.site-titles
{
margin:5px 0 0 0;
float:none;
text-align:center
}
.logo h2
{
padding-top:2px
}
.footer-img p
{
font-size:200%
}
.slideshow
{
margin-top:75px
}
.post-img img
{
height:auto;
margin-top:75px;
}
.post-tabs li
{
width:100% !important;
border:none;
border-bottom:1px solid #ecf0f1
}
textarea
{
width:95% !important
}
.professional-web-design p
{
width:95% !important
}
.post-tabs-active
{
background:#ecf0f1 !important;
border:none !important;
}
.posts-rel li
{
width:94%
}
.posts-rel li img
{
height:auto
}
.wpcf7-submit
{
margin:10px auto !important
}
.post-page .footer
{
height:auto !important
}
.dastresi
{
margin-top:180px
}
.order-form h2
{
display:none !important
}
.post-tabs li
{
border-right: 1px solid #ecf0f1;
}
}
@media only screen and (max-width:600px)
{
.info-des , .logo-circle img , .logo-circle h1 , .slider-footer:after , .double-or
{
display:none !important
}
.info-bg
{
width:100%
}
.site-menu
{
width:50%;
}
.circle
{
width:80% !important;
border:none !important;
margin:auto !important;
box-shadow:none !important;
height:auto;
border-radius:0;
float:none;
}
.circle ul li
{
position:relative;
margin:0px !important;
border:none;
width:100%
}
.circle ul
{
position:relative;
margin:0
}
.circel-chart
{
height:1100px;
text-align:center
}
.circle ul li i
{
display:none
}
.circle-item i
{
display:block !important
}
.circle-item
{
position:relative;
margin:20px 0 !important;
display:block !important;
}
.circle ul li:Hover
{
background:inherit !important;
border:inherit !important
}
.slider-footer-block-small-title
{
display:block !important
}
.slider-footer-block
{
width:100%;
padding:10px 0;
margin-top:-10px;
border-bottom:1px solid #f6f6f6
}
.slider-footer
{
height:auto;
}
.double-buttons
{
border:none !important;
text-align:center;
margin:auto
}
.double-buttons a
{
width:100%;
border-radius:0 !important;
border:1px solid #EEE;
}
.double-buttons a:last-child
{
border:1px solid #EEE;
border-top:none
}
.login-btn
{
width:30%
}
.top_nav ul li
{
width:100%;
display:block;
border-bottom:1px solid #f5f5f5
}
.top_nav ul li a
{
border:none
}
.top_nav ul
{
width:35%;
display:none;
background:#FAFAFA;
position:absolute;
top:6.1%;
right:62%;
border:1px solid #EEE;
border-top:none
}
.login-btn
{
background:#f9f9f9;
}
.top_nav_responsive
{
position:absolute;
right:90%;
margin-top:0;
padding:9px;
cursor:pointer;
display:block
}
}
@media only screen and (max-width:470px)
{
.content-title-description
{
display:none
}
.content-title ul li
{
width:100%
}
.info
{
margin-top:400px
}
.midd-bar-block
{
width:100%
}
.support-info
{
margin:50px 0px;
}
.double-buttons
{
margin-top:30px
}
.circle
{
width:90% !important;
margin-top:40px !important
}
.MyTicker
{
width:60%
}
.site-menu
{
width:60%
}
.double-buttons a
{
width:66%
}
.double-buttons a
{
width:87%;
border-radius:0 !important;
border:1px solid #EEE;
}
}
@media only screen and (max-width:410px)
{
.login-panel
{
width:98%
}
.login-panel input
{
width:80%
}
.site-menu
{
width:65%
}
.circle
{
width:105% !important
}
.double-buttons a
{
width:73%
}
}
@media only screen and (max-width:380px)
{
.circle
{
width:190% !important;
margin-right:-30px !important
}
}

ویرایش شده توسط محمد رضایی
لینک به ارسال

خودم فهمدیم :D :D

مشکل از قرار ندادن کد:


<meta name="viewport" content="initial-scale=1, maximum-scale=1" />

بود

لینک به ارسال

به گفتگو بپیوندید

هم اکنون می توانید مطلب خود را ارسال نمایید و بعداً ثبت نام کنید. اگر حساب کاربری دارید، برای ارسال با حساب کاربری خود اکنون وارد شوید .

مهمان
ارسال پاسخ به این موضوع ...

×   شما در حال چسباندن محتوایی با قالب بندی هستید.   حذف قالب بندی

  تنها استفاده از 75 اموجی مجاز می باشد.

×   لینک شما به صورت اتوماتیک جای گذاری شد.   نمایش به صورت لینک

×   محتوای قبلی شما بازگردانی شد.   پاک کردن محتوای ویرایشگر

×   شما مستقیما نمی توانید تصویر خود را قرار دهید. یا آن را اینجا بارگذاری کنید یا از یک URL قرار دهید.

×
×
  • اضافه کردن...