سلام
من یه قالبی دارم که توی گوشی فقط صفحه index درست نشون داده میشه
یعنی اگه از منوی کشویی وارد یه صفحه دیگه بشین اسکرول افقی میخوره و یکم نا فرم میشه و بهم میریزه
با inspect مرورگر هم حالت گوشی ریسپانسیو رو انتخاب کنین مشکلش رو متوجه میشین!
کسی میدونه مشکل چیه؟
لینک
elrak.ir
ممنون
@elyasbeshkani
ببین شما اومدی
display: none
دادی نباید اینو به after بدی باید به خود کلاس بدی اینو و راحت ترین راه اینه که خود بوت استرپ این کلاس رو داره یعنی شما روی تصاویری که نمی خوای نمایش داده بشه فک کنم کلاس d-none رو بهش بده و از عرضی که می خوای مجدد نمایش داده بشه کلاس بلوک رو بهش بده
فک کنم d-xl-block باشه
در واقع باید اون المنت های تصویرت رو این کلاس ها بهش اضافه بشه
<img class="d-none d-xl-block">
یه همچین حالتی حالا اسم دقیق کلاسها یادم نیست، توی مستندات بوت استرپ نیگاه کنی هستش
سلام مبارک باشه، قالب تون هم دلنشین هستش.
همه ی صفحات سر زدم، هیچ مشکلی هم مشاهده نکردم.
پیشنهاد: به نظرم فقط ارتفاع فهرست تون وقتی بالای صفحه قرار میگیره خیلی زیاد هستش، بخش زیادی از صفحه رو اشغال میکنه. ولی در کل مشکلی مشاهده نکردم.
ممنون
توی حالت موبایل مشکل داره
نگاه کنین
صفحه اصلی درسته >> http://s6.picofile.com/file/8389085342/photo_2020_02_23_18_31_10.jpg
صفحه های دیگه مثلا تماس با من >> http://s6.picofile.com/file/8389085326/photo_2020_02_23_18_31_04.jpg
به خاطر فایل های png هست که تویی سایتت قرار دادی
<img src="images/illustrations/page-title.png" alt="illustrations" class="bg-shape-1 w-100">
<img src="images/illustrations/leaf-pink-round.png" alt="illustrations" class="bg-shape-2">
<img src="images/illustrations/dots-cyan.png" alt="illustrations" class="bg-shape-3">
<img src="images/illustrations/leaf-orange.png" alt="illustrations" class="bg-shape-4">
<img src="images/illustrations/leaf-yellow.png" alt="illustrations" class="bg-shape-5">
<img src="images/illustrations/dots-group-cyan.png" alt="illustrations" class="bg-shape-6">
<img src="images/illustrations/leaf-cyan-lg.png" alt="illustrations" class="bg-shape-7">
من قالب رو درست نکردم و سر رشته ای از فرانت سایت ندارم، آماده گرفتمش
مشکل از عکس هاست؟
ولی
صفحه اصلی درسته >> http://s6.picofile.com/file/8389085342/photo_2020_02_23_18_31_10.jpg
صفحه های دیگه مثلا تماس با من >> http://s6.picofile.com/file/8389085326/photo_2020_02_23_18_31_04.jpg
راست کلیک کن و inspect بزن و اون فایل های png رو حذف کن میبنی درست میشه یا تویی ریساز حذف کن یا عرض رو اتومات بذار
آها مشکل رو فهمیدم ولی نمیدونم چجوری حل کنم؟
نمیشه کاری کرد توی نسخه موبایل اون عکسا نشون داده نشه؟
عرض رو اتومات بذار
چطوری؟
از مدیا در CSS استفاده کن
@media screen and (min-width: 1024px) {
body {
background-color: purple;
}
body:after {
content: "در حال حاضر عرض محدوده نمایش برابر یا بیشتر از 1024px می باشد. ";
}
}
آقای موسوی درست میگن، مشکل ناشی از همین عکس ها هستش.
دو مورد از عکس ها رو حذف کنید، باید مشکل تون کلا حل بشه:
عکس با کلاس bg-shape-7 و bg-shape-5 رو حذف کنید از قالب تون.
ببخشید بازم نتونستم
الان اینجوری گذاشتم کار نکرد
چطوری دقیقا بذارم؟
@media screen and (min-width: 1024px) {
.bg-shape-1::after,.bg-shape-2::after,.bg-shape-3::after,.bg-shape-4::after,.bg-shape-5::after,.bg-shape-6::after,.bg-shape-7::after {
display: none;
}
}
7 تا عکس با همین کلاس ها هست، میخوام توی موبایل دیده نشه هیچ کدوم
ممنون میشم راهنمایی کنین
@elyasbeshkani
ببین شما اومدی
display: none
دادی نباید اینو به after بدی باید به خود کلاس بدی اینو و راحت ترین راه اینه که خود بوت استرپ این کلاس رو داره یعنی شما روی تصاویری که نمی خوای نمایش داده بشه فک کنم کلاس d-none رو بهش بده و از عرضی که می خوای مجدد نمایش داده بشه کلاس بلوک رو بهش بده
فک کنم d-xl-block باشه
در واقع باید اون المنت های تصویرت رو این کلاس ها بهش اضافه بشه
<img class="d-none d-xl-block">
یه همچین حالتی حالا اسم دقیق کلاسها یادم نیست، توی مستندات بوت استرپ نیگاه کنی هستش
@milad
@juza66
خیلی ممنونم ازتون بابت کمکتون
@hossein.r.1442
تشکر حالت دوم خیلی راحت تر بود
@hossein.r.1442
@milad
@juza66
ببخشید
توی این صفحه چرا اسکرول افقی هست؟ (موبایل)
https://elrak.ir/project.php?id=14
و اینکه همه المان ها و... توی حالت موبایل یکم زیادی بزرگه چیکار میشه کرد؟!
مخصوصا قسمت هدر
@elyasbeshkani
توی المنت تصویر نمونه که نوشته دیبا فود یه کلاس mr-5 داری اونو باید توی مدیای موبایل برداری تا مشکلت درست بشه
@elyasbeshkani
واگه منظور از بزرگی اون تایتل هستش میتونی این استایل رو
.page-title {
padding: 250px 0 150px;
}
توی مدیای مورد نظر که اینجا موبایله بکنی
.page-title {
padding: 120px 0 120px;
}
به نظر من اگر قالب رو بصورت آماده دارین استفاده می کنید، دیگه خیلی سخت نگیرید، انتظار نداشته باشید که همه چیزش سفارشی باشه.
راه حل دیگه هم اینه که قالب رو به کسی که طراحی رابط کاربری بلده بسپرید، تغییرات لازم رو بده، بعدش مجدد تحویل بگیرید.
آیا مایل به ارسال نوتیفیکیشن و اخبار از طرف راکت هستید ؟