F a r s h i d

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

13 پست در این موضوع قرار دارد

سلام دوستان ، الان من پوسته سایتمو رسپانسیو کردم ولی وقتی با تبلت یا موبایل واردش میشم رسپانسیو نیست دلیلش چیه ؟

اینم کدهاش :


@media screen and (max-width: 980px) {
#main-menu {width: 970px;}
#all-content {width: 970px;}
#right-menu {width: 220px;}
}
@media only screen and (max-width: 800px) {
#main-menu {width: 790px;}
#all-content {width: 790px;}
#right-menu {width: 210px;}
.matn {width:279px;}
.matn-image img {width: 279px;}
#content {width: 570px;}
#content2 {width: 575px;}
#content3 {width: 575px;}
#content4 {width: 575px;}
#content5 {width: 575px;}
}
@media only screen and (max-width: 768px) {
#main-menu {width: 758px;}
#all-content {width: 758px;}
#right-menu {width: 197px;}
.matn {width:269px;}
.matn-image img {width: 269px;}
#content {width: 550px;}
#content2 {width: 550px;}
#content3 {width: 550px;}
#content4 {width: 550px;}
#content5 {width: 550px;}
}
@media only screen and (max-width: 360px) {
#main-menu {width: 350px;}
#search {display:none;}
#all-content {width: 350px;}
#right-menu {width: 345px;}
.matn {width:340px; border:none;}
.matn-image img {width: 342px;}
#content {width: 345px;}
#content2 {width: 345px;}
#content3 {width: 345px;}
#content4 {width: 345px;}
#content5 {width: 345px;}
.img-more img {width: 320px;}
form#commentform textarea { width:320px;}
}
@media only screen and (max-width: 320px) {
#main-menu {width: 310px;}
#search {display:none;}
#all-content {width: 310px;}
#right-menu {width: 305px;}
.matn {width:340px; border:none;}
.matn-image img {width: 302px;}
#content {width: 305px;}
#content2 {width: 305px;}
#content3 {width: 305px;}
#content4 {width: 305px;}
#content5 {width: 305px;}
.img-more img {width: 280px;}
form#commentform textarea { width:280px;}
}

0

به اشتراک گذاری این پست


لینک به پست

از متاتگ viewoirt استفاده کردید ؟؟؟

1

به اشتراک گذاری این پست


لینک به پست

از متاتگ viewoirt استفاده کردید ؟؟؟

این چیه ؟

0

به اشتراک گذاری این پست


لینک به پست

این کد رو قبل از پایان رسیدن تگ head در فایل اچ تی ام ال قرار بدید


<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">

3

به اشتراک گذاری این پست


لینک به پست

این کد رو قبل از پایان رسیدن تگ head در فایل اچ تی ام ال قرار بدید


<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">

ممنون کار کرد ، ولی توی تبلت یه اسکرول افقی ایجاد میشه ولی توی موبایل درست نشون میده ، چطوری میتونم رفعش کنم

1

به اشتراک گذاری این پست


لینک به پست

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


overflow-x:hidden;
overflow-y:auto;

ویرایش شده در توسط ashki0076
1

به اشتراک گذاری این پست


لینک به پست

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


overflow-x:hidden;
overflow-y:auto;

ببخشید اینو کجای استایل قرار بدم ؟

0

به اشتراک گذاری این پست


لینک به پست

توی کدوم رزولشن مشکل دارید؟

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

فکر می کنم مشکل شما توی 768 باشه

ضمنا توجه کنید مدیا کوئری های غیر استاندارد استفاده کردید

1

به اشتراک گذاری این پست


لینک به پست

توی کدوم رزولشن مشکل دارید؟

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

فکر می کنم مشکل شما توی 768 باشه

ضمنا توجه کنید مدیا کوئری های غیر استاندارد استفاده کردید

گذاشتم کار نکرد

استاندارش چیه ؟

0

به اشتراک گذاری این پست


لینک به پست

دوستان من یه پوسته دیگه ایی رو هم رسپانسیو کردم یه مشکلی وجود داره وقتی تو ادامه مطلب میریم و یه عکسی که گذاشتیم تو مطلب مثلا توی عرض 700 سایت رو باز کردیم با یه تبلت و عکس اون مطلب کوچیک نشده در صورتی که من بهش .text-more img {width: 520px;height: 300px;} دادم ولی باز عکس تغییر نکرده اگه امکان داره مشکل رو بگید.

www.clashiha.ir

0

به اشتراک گذاری این پست


لینک به پست

فعلا بهترین راه موجو استفاده از


img {
max-width:100%;
height:auto;
}

هست

البته اسکریپت ها هم هستند

1

به اشتراک گذاری این پست


لینک به پست

فعلا بهترین راه موجو استفاده از


img {
max-width:100%;
height:auto;
}

هست

البته اسکریپت ها هم هستند

ممنون حل شد

مشکل اسکرول پوسته نوولفا همچنان پابرجاست :(

1

به اشتراک گذاری این پست


لینک به پست

عرض کردم خدمتتون تنها دلیلش اون می تونه باشه

آهان راستی یه چیزی الان یادم اومد

شما این رو باید زیر body قرار بدید ها

یعنی به این صورت


@media only screen and (max-width: 768px) {
body {overflow-x:hidden; overflow-y:auto;}
...... بقیه کدهای خودتون

}

در واقع باید یه بادی اضافه کنید و کدی رو که دادم توش قرار بدید ، البته بادی باید زیر مدیاکوئری مشخص باشه

برای جلوگیری از مشکل اسکرول در همه حالت ها می تونید این کدی که دادم رو توی بادی کل قالب قرار بدید و در این صورت اسکرول افقی کلا حذف میشه

1

به اشتراک گذاری این پست


لینک به پست

برای ارسال نظر یک حساب کاربری ایجاد کنید یا وارد حساب خود شوید

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

ایجاد یک حساب کاربری

برای حساب کاربری جدید در انجمن ما ثبت نام کنید. عضویت خیلی ساده است !


ثبت نام یک حساب کاربری جدید

ورود به حساب کاربری

دارای حساب کاربری هستید؟ از اینجا وارد شوید


ورود به حساب کاربری