رفتن به مطلب

ریسپانسیو نبودن قالب


Configer

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

سلام وقت بخیر

من توی سایت فروشگاهیم متاسفانه صفحه دسته بندی محصولات

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

به عنوان نمونه صفحات زیر رو با موبایل باز کنید.

ادرس حذف شد

 

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

درود.

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

 

@media screen and (max-width: 480px) {
    .woocommerce .products ul, .woocommerce ul.products {width: 52% !important;}
	.rightsidebar #primary {width: 100% !important;}
.woocommerce-tabs.wc-tabs-wrapper, .page .entry-content {width: 100% !important;}
}
@media screen and (max-width: 320px) {
    .woocommerce .products ul, .woocommerce ul.products {width: 34% !important;}
	.rightsidebar #primary {width: 100% !important;}
.woocommerce-tabs.wc-tabs-wrapper, .page .entry-content {width: 100% !important;}
}
@media screen and (max-width: 568px) {
    .woocommerce .products ul, .woocommerce ul.products {width: 62% !important;}
	.rightsidebar #primary {width: 100% !important;}
.woocommerce-tabs.wc-tabs-wrapper, .page .entry-content {width: 100% !important;}
}
@media screen and (max-width: 600px) {
    .woocommerce .products ul, .woocommerce ul.products {width: 66% !important;}
	.rightsidebar #primary {width: 100% !important;}
.woocommerce-tabs.wc-tabs-wrapper, .page .entry-content {width: 100% !important;}
}
@media screen and (max-width: 800px) {
    .woocommerce .products ul, .woocommerce ul.products {width: 90% !important;}
	.rightsidebar #primary {width: 100% !important;}
.woocommerce-tabs.wc-tabs-wrapper, .page .entry-content {width: 100% !important;}
}

 

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

در 12 ساعت قبل، sadegh گفته است :

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

 

درود.

رسپانسیو نباشه؟!

متاسفانه حذف قابلیت رسپانسیو از یک قالب سخته. چون باید بگردید دستورات مربوط به رسپانسیو رو از فایل های استایل قالب پیدا کنید و حذف کنید. در بعضی موارد هم یک استایل عمومی ممکنه شامل دستوراتی باشه که محدوده محتوا رو متناسب با اندازه صفحه نمایش نشون میده.

در این مورد بیشتر از این نمی تونم کمک کنم. معمولا همه دنبال این هستند که سایتشون به بهترین شکل در تمامی دستگاه ها نمایش داده بشه، دلیلی برای حذف رسپانسیو نمی بینم!

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

در در 6 بهمن 1396 در 15:35، Masih گفته است :

درود.

رسپانسیو نباشه؟!

متاسفانه حذف قابلیت رسپانسیو از یک قالب سخته. چون باید بگردید دستورات مربوط به رسپانسیو رو از فایل های استایل قالب پیدا کنید و حذف کنید. در بعضی موارد هم یک استایل عمومی ممکنه شامل دستوراتی باشه که محدوده محتوا رو متناسب با اندازه صفحه نمایش نشون میده.

در این مورد بیشتر از این نمی تونم کمک کنم. معمولا همه دنبال این هستند که سایتشون به بهترین شکل در تمامی دستگاه ها نمایش داده بشه، دلیلی برای حذف رسپانسیو نمی بینم!

تشکر از پاسخگویی

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

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

در در 6 بهمن 1396 در 02:37، sadegh گفته است :

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

 

سلام
من رفتم و حدودا پیدا کردم
با کار کردن افزونه ویژول بولدر دیوی در قسمت css میشه از نوع کدها استفاده کرد تا از ریسپانسیو شدن جلوگیری بشه

/*** Responsive Styles Large Desktop And Above ***/
@media all and (min-width: 1405px) {
  
}
 
/*** Responsive Styles Standard Desktop Only ***/
@media all and (min-width: 1100px) and (max-width: 1405px) {
 
}
 
/*** Responsive Styles Tablet And Below ***/
@media all and (max-width: 980px) {
 
}
 
/*** Responsive Styles Tablet Only ***/
@media all and (min-width: 768px) and (max-width: 980px) {
 
}
 
/*** Responsive Styles Smartphone Only ***/
@media all and (max-width: 767px) {
 
}
 
/*** Responsive Styles Smartphone Portrait ***/
@media all and (max-width: 479px) {
 
لینک به دیدگاه
به اشتراک گذاری در سایت های دیگر

در در 30 دی 1396 در 17:14، Masih گفته است :

درود.

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

 


@media screen and (max-width: 480px) {
    .woocommerce .products ul, .woocommerce ul.products {width: 52% !important;}
	.rightsidebar #primary {width: 100% !important;}
.woocommerce-tabs.wc-tabs-wrapper, .page .entry-content {width: 100% !important;}
}
@media screen and (max-width: 320px) {
    .woocommerce .products ul, .woocommerce ul.products {width: 34% !important;}
	.rightsidebar #primary {width: 100% !important;}
.woocommerce-tabs.wc-tabs-wrapper, .page .entry-content {width: 100% !important;}
}
@media screen and (max-width: 568px) {
    .woocommerce .products ul, .woocommerce ul.products {width: 62% !important;}
	.rightsidebar #primary {width: 100% !important;}
.woocommerce-tabs.wc-tabs-wrapper, .page .entry-content {width: 100% !important;}
}
@media screen and (max-width: 600px) {
    .woocommerce .products ul, .woocommerce ul.products {width: 66% !important;}
	.rightsidebar #primary {width: 100% !important;}
.woocommerce-tabs.wc-tabs-wrapper, .page .entry-content {width: 100% !important;}
}
@media screen and (max-width: 800px) {
    .woocommerce .products ul, .woocommerce ul.products {width: 90% !important;}
	.rightsidebar #primary {width: 100% !important;}
.woocommerce-tabs.wc-tabs-wrapper, .page .entry-content {width: 100% !important;}
}

 

 

در در 30 دی 1396 در 17:14، Masih گفته است :

درود.

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

 


@media screen and (max-width: 480px) {
    .woocommerce .products ul, .woocommerce ul.products {width: 52% !important;}
	.rightsidebar #primary {width: 100% !important;}
.woocommerce-tabs.wc-tabs-wrapper, .page .entry-content {width: 100% !important;}
}
@media screen and (max-width: 320px) {
    .woocommerce .products ul, .woocommerce ul.products {width: 34% !important;}
	.rightsidebar #primary {width: 100% !important;}
.woocommerce-tabs.wc-tabs-wrapper, .page .entry-content {width: 100% !important;}
}
@media screen and (max-width: 568px) {
    .woocommerce .products ul, .woocommerce ul.products {width: 62% !important;}
	.rightsidebar #primary {width: 100% !important;}
.woocommerce-tabs.wc-tabs-wrapper, .page .entry-content {width: 100% !important;}
}
@media screen and (max-width: 600px) {
    .woocommerce .products ul, .woocommerce ul.products {width: 66% !important;}
	.rightsidebar #primary {width: 100% !important;}
.woocommerce-tabs.wc-tabs-wrapper, .page .entry-content {width: 100% !important;}
}
@media screen and (max-width: 800px) {
    .woocommerce .products ul, .woocommerce ul.products {width: 90% !important;}
	.rightsidebar #primary {width: 100% !important;}
.woocommerce-tabs.wc-tabs-wrapper, .page .entry-content {width: 100% !important;}
}

 

نه متاسفانه انجام نشد

 

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

در ۱ ساعت قبل، sadegh گفته است :

 

نه متاسفانه انجام نشد

 

کدی که من دادم برای یک قالب دیگه هست و جهت رسپانسیو شدن. شما باید دستورات media رو داخل فایل های استایل پیدا کنید و با دقت حذف کنید

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

  • 2 هفته پیش...
در در 12 بهمن 1396 در 03:29، Masih گفته است :

کدی که من دادم برای یک قالب دیگه هست و جهت رسپانسیو شدن. شما باید دستورات media رو داخل فایل های استایل پیدا کنید و با دقت حذف کنید

دقیقا از کدوم فایل قالب باید پیداش کنم ؟

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

در 1 ساعت قبل، sadegh گفته است :

دقیقا از کدوم فایل قالب باید پیداش کنم ؟

نمیشه دقیقا مشخص کرد کدوم یکی از فایل هاست ولی باید تمامی فایل های CSS قالب رو چک کنید. برای راحتی کار هم می تونید قالب رو با نرم افزار NotePad++ مورد بررسی قرار بدید.

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

در 6 ساعت قبل، Masih گفته است :

نمیشه دقیقا مشخص کرد کدوم یکی از فایل هاست ولی باید تمامی فایل های CSS قالب رو چک کنید. برای راحتی کار هم می تونید قالب رو با نرم افزار NotePad++ مورد بررسی قرار بدید.

مثلا ی جاهایی همچین کداییه
اینارو باید پاک کرد
/* Fullscreen Header */
.et_header_style_fullscreen .et_slide_in_menu_container .et_mobile_menu li a {
    font-size: 30px;
}

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

در ۱ ساعت قبل، sadegh گفته است :

مثلا ی جاهایی همچین کداییه
اینارو باید پاک کرد
/* Fullscreen Header */
.et_header_style_fullscreen .et_slide_in_menu_container .et_mobile_menu li a {
    font-size: 30px;
}

خیر .

ببینید کد معرف مربوط به رسپانسیو و واکنشگرا کردن عناصر قالب به صورت زیر هست:

@media screen and (max-width: 600px) {
    .sample-class {width: 66% !important;}
	// و مابقی کدهای
}

زمانی که @media استفاده شد، یعنی قصد تعریف یک اندازه صفحه نمایش جدید داره. در بالا هم عرض صفحه نمایش مورد نظر 600 پیکسل تعیین شده. بعد داخل اون دستورات استایلی قرار میگرن که فقط در صورتی که صفحه نمایش 600 پیکسل عرض داشت ، اجرا میشن. 

داخل اکثر قالب ها هم برای اجرای استایل های مختلف برای اندازه های صفحه نمایش مختلف (مثل موبایل، تبلت، و حالت های افقی و عمودی اینها) از چنین کدهایی استفاده می کنند. پس شما برای حذف رسپانسیو باید media و تمامی استایل های داخل اون رو حذف کنید.

 

در ضمن اکثر مرورگرهای مدرن، برخی از عناصر عمومی موجود در سایت ، مثل body، html، p، Table و ... رو به صورت خودکار نسبت به اندازه صفحه نمایش و اندازه پنجره مرورگر تنظیم می کنند.

برای جلوگیری از اعمال استایل های پیش فرض مرورگر روی برخی از عناصرها که باعث رسپانسیو شدن سایت در اندازه های مختلف میشه، بهترین راه کار اینه که اندازه تمامی بخش ها رو به پیکسل وارد کنید. استفاده از مقادیر درصدی در موقعی که نمی خواهید رسپانسیو داشته باشید براتون مشکل ساز میشه.

همچنین برای تگ body و html باید یک width تعیین کنید و مقدار اون رو به پیکسل وارد کنید. برای مثال :

body {width: 1366px !important;}

و مابقی عناصر قالب هم به همین صورت باید بر اساس 1366 پیکسل ، مجددا اندازه دهی بشن تا یک اندازه خاص و مکان ثابت رو در تمامی دستگاه ها داشته باشند.

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

در 3 ساعت قبل، Masih گفته است :

خیر .

ببینید کد معرف مربوط به رسپانسیو و واکنشگرا کردن عناصر قالب به صورت زیر هست:


@media screen and (max-width: 600px) {
    .sample-class {width: 66% !important;}
	// و مابقی کدهای
}

زمانی که @media استفاده شد، یعنی قصد تعریف یک اندازه صفحه نمایش جدید داره. در بالا هم عرض صفحه نمایش مورد نظر 600 پیکسل تعیین شده. بعد داخل اون دستورات استایلی قرار میگرن که فقط در صورتی که صفحه نمایش 600 پیکسل عرض داشت ، اجرا میشن. 

داخل اکثر قالب ها هم برای اجرای استایل های مختلف برای اندازه های صفحه نمایش مختلف (مثل موبایل، تبلت، و حالت های افقی و عمودی اینها) از چنین کدهایی استفاده می کنند. پس شما برای حذف رسپانسیو باید media و تمامی استایل های داخل اون رو حذف کنید.

 

در ضمن اکثر مرورگرهای مدرن، برخی از عناصر عمومی موجود در سایت ، مثل body، html، p، Table و ... رو به صورت خودکار نسبت به اندازه صفحه نمایش و اندازه پنجره مرورگر تنظیم می کنند.

برای جلوگیری از اعمال استایل های پیش فرض مرورگر روی برخی از عناصرها که باعث رسپانسیو شدن سایت در اندازه های مختلف میشه، بهترین راه کار اینه که اندازه تمامی بخش ها رو به پیکسل وارد کنید. استفاده از مقادیر درصدی در موقعی که نمی خواهید رسپانسیو داشته باشید براتون مشکل ساز میشه.

همچنین برای تگ body و html باید یک width تعیین کنید و مقدار اون رو به پیکسل وارد کنید. برای مثال :


body {width: 1366px !important;}

و مابقی عناصر قالب هم به همین صورت باید بر اساس 1366 پیکسل ، مجددا اندازه دهی بشن تا یک اندازه خاص و مکان ثابت رو در تمامی دستگاه ها داشته باشند.

تشکر اجرا میکنم
فقط طیق این گفته ها احتمالا پس میتونم بجای پاک کردن دستور مدیا عدداشو تغییر بدم
؟
 

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

در در 26 بهمن 1396 در 04:32، sadegh گفته است :

تشکر اجرا میکنم
فقط طیق این گفته ها احتمالا پس میتونم بجای پاک کردن دستور مدیا عدداشو تغییر بدم
؟
 

در تمامی دستورات media استایل هایی تقریبا مشابه با اعداد مختلف تعیین میشن . تغییر اعداد در این مورد می تونه کمک کنه ولی حذف کردنشون راه حل بهتر و سریع تری هست.

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

در 5 ساعت قبل، sadegh گفته است :

همه این کارهارو انجام دادم ولی نشد :(

درود مجدد.

گفته ها رو انجام بدید، کمی هم داخل اینترنت جستجو کنید.

در صورتی که مجددا به مشکل برخوردید، یک تاپیک جدید برای مشکلتون ایجاد کنید.

 

+قفل شد.

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

بایگانی شده

این موضوع بایگانی و قفل شده و دیگر امکان ارسال پاسخ نیست.

مهمان
این موضوع برای عدم ارسال قفل گردیده است.
×
×
  • اضافه کردن...