رفتن به مطلب
sorina_1100

مشکل در نمایش یک ماژول در نسخه موبایلی

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

با سلام

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

مشکل کجاست؟

آدرس سایت :

https://123parse.com

با تشکر

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


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

سلام
دوست عزیز این اشکال مربوط میشه به یک دایو با مشخصات زیر

<div class="rt-block component-block">
در فایل
template.css
خط 206

عبارت زیر را پیدا کنید
 

#rt-main .rt-block

و براش
margin: 60% 8%;
قرار دهید. البته خودتون می تونید اعداد را طبق سلیقه خودتون تغییر بدهید

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


لینک به ارسال
به اشتراک گذاری در سایت های دیگر
48 minutes قبل , bashka گفت:

سلام
دوست عزیز این اشکال مربوط میشه به یک دایو با مشخصات زیر

<div class="rt-block component-block">
در فایل
template.css
خط 206

عبارت زیر را پیدا کنید
 


#rt-main .rt-block

و براش
margin: 60% 8%;
قرار دهید. البته خودتون می تونید اعداد را طبق سلیقه خودتون تغییر بدهید

 

خیلی ممنون

آقا با اینکار تو موبایلی اوکی میشه اما رو لپ تاپ خراب میشه و یه فاصله خیلی زیادی میفته ، همون خط رو به صورت مدیاکوئری وارد میکنم که تو موبایلی با 60 درصد عمل کنه و درست بشه اما اعمال نمیشه

مشکل کجاست یعنی؟

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


لینک به ارسال
به اشتراک گذاری در سایت های دیگر
ارسال شده در (ویرایش شده)
1 ساعت قبل, sorina_1100 گفت:

 

خیلی ممنون

آقا با اینکار تو موبایلی اوکی میشه اما رو لپ تاپ خراب میشه و یه فاصله خیلی زیادی میفته ، همون خط رو به صورت مدیاکوئری وارد میکنم که تو موبایلی با 60 درصد عمل کنه و درست بشه اما اعمال نمیشه

مشکل کجاست یعنی؟

خب راستش ما که به قالب و هاست دسترسی نداریم فقط از ظاهر و کدهایی که در مرور می بینیم، برای حل مشکل سر نخ می دهیم:) بقیه اش به عهده خودتون هست:)

برای استفاده از مدیاکوئری باید مثلاً بصورت زیر عمل کنید:
 

@media only screen and (max-device-width:360px){div.rt-block{margin: 60% 8% !mportant;}}

 یا چون این دایو دو تا کلاس بطور همزمان گرفته این کد را وارد کنید
 

@media only screen and (max-device-width:360px){div.rt-block.component-block{margin: 60% 8% !mportant;}}

ببینید کدامیک از کدها نتیجه مطلوب برای رزولیشن 360 ارائه می دهد. اعداد و ارقام را می توانید به دلخواه عوض کنید تا به نتیجه مطلوب برسید. همچین عدد رزولیشن را می تونید تغییر دهید، از چند مدیاکوئری همزمان استفاده کنید یا آنها را با هم ترکیب کنید و حالت های min و max قرار دهید خلاصه حالت و راه حل زیاد است. امتحان کنید تا به جواب مطلوب برسید

ویرایش شده توسط bashka

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


لینک به ارسال
به اشتراک گذاری در سایت های دیگر
بر 7/12/2017 at 13:06 , bashka گفت:

خب راستش ما که به قالب و هاست دسترسی نداریم فقط از ظاهر و کدهایی که در مرور می بینیم، برای حل مشکل سر نخ می دهیم:) بقیه اش به عهده خودتون هست:)

برای استفاده از مدیاکوئری باید مثلاً بصورت زیر عمل کنید:
 


@media only screen and (max-device-width:360px){div.rt-block{margin: 60% 8% !mportant;}}

 یا چون این دایو دو تا کلاس بطور همزمان گرفته این کد را وارد کنید
 


@media only screen and (max-device-width:360px){div.rt-block.component-block{margin: 60% 8% !mportant;}}

ببینید کدامیک از کدها نتیجه مطلوب برای رزولیشن 360 ارائه می دهد. اعداد و ارقام را می توانید به دلخواه عوض کنید تا به نتیجه مطلوب برسید. همچین عدد رزولیشن را می تونید تغییر دهید، از چند مدیاکوئری همزمان استفاده کنید یا آنها را با هم ترکیب کنید و حالت های min و max قرار دهید خلاصه حالت و راه حل زیاد است. امتحان کنید تا به جواب مطلوب برسید

 

با تشکر

همه مدل هایی که به ذهنم رسید اعمال کردم اما نتیجه نداد

به نظرتون راهی دیگه هست؟

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


لینک به ارسال
به اشتراک گذاری در سایت های دیگر
ارسال شده در (ویرایش شده)
13 minutes قبل , sorina_1100 گفت:

 

با تشکر

همه مدل هایی که به ذهنم رسید اعمال کردم اما نتیجه نداد

به نظرتون راهی دیگه هست؟

سلام

100 درصد باید جواب بده. مشکل یک css ساده است.

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

در نهایت اگر دوست داشتید در پیغام خصوصی دسترسی بدید تا خودم بررسی کنم.

ویرایش شده توسط bashka

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


لینک به ارسال
به اشتراک گذاری در سایت های دیگر
52 minutes قبل , bashka گفت:

سلام

100 درصد باید جواب بده. مشکل یک css ساده است.

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

در نهایت اگر دوست داشتید در پیغام خصوصی دسترسی بدید تا خودم بررسی کنم.

 

بله درست شد اما مشکل این هست که الان تو صفحه اول خراب میشه ، چون ماژول ها کلاس نگرفتن مجبور شدم به دایو اصلی تو اچ تی ام ال یه کلاس بدم که مارجین 60درصد و 15درصد داره

تو تمام صفحات اوکی میشه اما تو صفحه اصلی فاصله زیادی میفته زیر اون دو تا ماژول ، نمیدونم چه کار کنم که اون کلاس ها به منوی صفحه اصلی اعمال نشه و روی بقیه صفحات کار کنه

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


لینک به ارسال
به اشتراک گذاری در سایت های دیگر
1 ساعت پیش, sorina_1100 گفت:

 

بله درست شد اما مشکل این هست که الان تو صفحه اول خراب میشه ، چون ماژول ها کلاس نگرفتن مجبور شدم به دایو اصلی تو اچ تی ام ال یه کلاس بدم که مارجین 60درصد و 15درصد داره

تو تمام صفحات اوکی میشه اما تو صفحه اصلی فاصله زیادی میفته زیر اون دو تا ماژول ، نمیدونم چه کار کنم که اون کلاس ها به منوی صفحه اصلی اعمال نشه و روی بقیه صفحات کار کنه

سلام
تا اونجاییکه من می دونم نباید ربطی به این صفحه و اون صفحه سایت داشته باشه.

 از تنظیمات خود ماژول ها در مدیریت جوملا می توانید به ماژول ها، کلاس یا آی دی بدید، سپس در فایل css به آنها اساتیل موردنظر را اعمال کنید.



همچنین حواستون به این فایل https://123parse.com/templates/rt_voxel_responsive/css/responsive.css باشه چون قسمت ریسپانسیو، پر از مدیا کوئری هست که قسمت های مختلف را تحت تاثیر میذاره. مثلاً همین که رزولیشن به 767 پیکسل میرسه ارتفاع اسلاید شو زیاد میشه. کدهای زیر مربوط به سایت شماست که در همون فایل https://123parse.com/templates/rt_voxel_responsive/css/responsive.css  قرار دارند. هر مشکلی هست به همین فایل یا سایر فایل های css که دارای مدیا کوئری هستند مربوط میشه که اینها را باید تنظیم کنید.

/* Responsive */
@media only screen and (min-width: 1200px) {
	body .visible-large {display: inherit !important;}
	body .hidden-large {display: none !important;}
}

@media only screen and (min-width: 960px) and (max-width: 1199px) {
	body .visible-large {display: none !important;}
	body .hidden-large {display: inherit !important;}
	body .visible-desktop {display: inherit !important;}
	body .hidden-desktop {display: none !important;}
}

@media only screen and (min-width: 768px) and (max-width: 959px) {
	body .visible-tablet {display: inherit !important;}
	body .hidden-tablet {display: none !important;}
	body .hidden-desktop {display: inherit !important;}
	body .visible-desktop {display: none !important;}
	body .visible-large {display: none !important;}
	body .hidden-large {display: inherit !important;}
	body .layout-slideshow .sprocket-features-content {width: 59%;}
	body .menutop li .item {font-size: 1em;}
}

@media only screen and (min-width: 768px) {
	.rt-menu-mobile {display: none;}
        .te{display: none !important;}
}

@media only screen and (max-width: 767px) {
	body .visible-phone {display: inherit !important;}
	body .hidden-phone {display: none !important;}
	body .hidden-desktop {display: inherit !important;}
	body .visible-desktop {display: none !important;}
	body .hidden-large {display: inherit !important;}
	body .visible-large {display: none !important;}
	body #rt-logo {margin: -20px auto;}
	.rt-block.menu-block {visibility: hidden;top: -30000px;left: -30000px;position: absolute;}
	.rt-totop {position: static;float: right;margin-right: -21px;}
	body .component-content	.column-1, body .component-content .column-2, body .component-content	.column-3 {width: 100% !important;float: none !important;margin-left: 0 !important;margin-right: 0 !important;margin-bottom: 0 !important;}	
	body .rt-demo-width-20, body .rt-demo-width-25, body .rt-demo-width-30, body .rt-demo-width-33, body .rt-demo-width-40, body .rt-demo-width-50, body .rt-demo-width-60, body .rt-demo-width-66, body .rt-demo-width-70, body .rt-demo-width-75, body .rt-demo-width-80 {width: 100%;}
	.rt-demo-space {margin: 5px;}
	body .rt-container .floatleft, body .rt-container .floatright {float: none;}
	body #rt-main-container #rt-body-surround {padding: 5px 0;}
	body #rt-header {margin-top: -20px;padding-top: 20px;}
	body #rt-header .rt-social-buttons {float: none;margin: -10px auto;position: relative;max-width: 120px;}
	body #rt-header [class*="rt-grid"] {float: left;}
	body #rt-slideinset .rt-block {padding: 15px;margin: 15px 0;position: relative;right: inherit;top: 15px;width: inherit;}
	body .layout-slideshow .sprocket-features-content {left: 15px;right: 15px;width: auto;}
	body .layout-slideshow .sprocket-features-title {font-size: 2.2em;}
	body .style-panel-container {display: none;}
	body #rt-utility .horizmenu ul.menu li {display: block;border: none;}
	body .sprocket-mosaic .sprocket-mosaic-header .sprocket-mosaic-order {float: left;margin-top: 10px;}
	body .sprocket-tabs-nav li {float: none;}
	body .rg-ss-slice-container {max-width: 100% !important;height: auto !important;}
	body .rg-ss-navigation-container {max-width: 100% !important;height: auto !important;}
	body .rg-ss-thumb-list, body #main .rg-ss-thumb-list {width: 100% !important;}
}

@media only screen and (min-width: 481px) and (max-width: 767px) {
}

@media only screen and (max-width: 480px) {
	#rt-copyright .rt-block {clear: both;}
	body .layout-slideshow .sprocket-features-desc {display: none;}
}

 

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


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

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

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

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

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

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

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

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

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


×
×
  • افزودن...