Printable View
سلام دوستان .یه قالب بوت استرپ از یه سایت دانلود کردم و راستچین کردم و تغییراتی که میخواستم رو داخلش اعمال کردم. حالا یک سوال دارم. با کوچک شدن سایز نمایشگر قسمت هدر سایت و منو هیدن میشن که من نمیخوام اینجوری بشه.میخوام فقط مثل بقیه اجزا به تناسب صفحه کوچک بشن.قطعا از یک یا چمد class استفاده شده ولی خب من پیداش نکردم که حذف کنم.
سلام
شما باید در قسمت Media@ قالب بگردید ...
چون در اون بخش ها هست که میتونید تعیین کنید با تغییر اندازه نمایشگر چیزی از قالب کم یا زیاد بشه ...
باتشکر
اين قسمت Media@ كجا هست؟نقل قول:
توی فایل css قالب ...
media@ ها نوعی سلکتور css هستند که درون اونها تعیین می کنید که فلان عنصر در فلان اندازه نمایشگر به چه شکلی در بیاد ..
در کل جزو مبحث واکنشگرایی هستند ....
شما باید توی فایل های css قالب بگردید و بعد از پیدا کردن media@ درونش جستجو کنید تا نام کلاس یا آی دی موردنظر رو پیدا کنید ...
خيلي ممنون حل شدنقل قول:
الان يه مشكل ديگه دارم
هدر تو سايز بزرگ خوبه و وسطچينه وقتي سايز كوچك ميشه متن و لوگو ديگه وسطچين نيست.
اين رو چجوري درست كنم؟
[IMG] [ برای مشاهده لینک ، با نام کاربری خود وارد شوید یا ثبت نام کنید ] [/IMG]
سلام
شما دوتا راه دارید برای وسط نگه داشتن لوگو و متن ...
یکی این که کدهای لوگو و متن رو در بین تگ <center><center/> قرار بدید ...
دوم اینکه به آی یا کلاس لوگو و متن خاصیت ;margin:auto رو اضافه کنید .( پیشنهاد میشه )
اگر از راه های بالا قبلا استفاده کردید
برای اینکه دو باره متن صاف بشه باید به لوگو خاصیت ;clear:both رو بدید ...
باتشکر
نقل قول:
ممنون
اين موارد كه گفتيد رو اعمال كردم ولي نشد
ميشه يه نگاه به كدهام بندازيد؟
کد:<div>
<img class="logo" src="img/PGSlogo.png" alt="">
<div class="brand"><span class="distance">متن تست</span></div>
<div class="address-bar"><span class="distance">متن تست متن تست متن تست متن تست متن تست متن تست متن تست </span></div>
</div>
<!-- Navigation -->
<nav class="navbar navbar-default" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="" id="">
<ul class="nav navbar-nav">
<li>
<a href="index.html">صفحه اصلي</a>
</li>
<li>
<a href="gallery.html">نمونه كارها</a>
</li>
<li>
<a href="services.html">خدمات ديگر</a>
</li>
<li>
<a href="contact.html">ارتباط با ما</a>
</li>
</ul>
</div>
کد:@ [ برای مشاهده لینک ، با نام کاربری خود وارد شوید یا ثبت نام کنید ] screen and (min-width:0px) {
.brand {
display: inherit;
margin: auto;
padding: 30px 0 10px;
text-align: center;
font-family: "Josefin Slab","Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 5em;
font-weight: 700;
line-height: normal;
color: #fff;
}
.address-bar {
display: inherit;
padding: 0 0 40px;
text-align: center;
text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
text-transform: uppercase;
font-size: 2em;
font-weight: 400;
color: #fff;
margin: auto;
}
سلام
در بخش media@ ها به کلاس brand و یا کلاس logo هنگامی که صفحه کوچیک میشه خاصیت ;display:block بدید ...
به همه display ها مقدار block دادم ولي فرقي نكرد.نقل قول:
باید برای کلاس متن هدر width تعیین کنید تا وقتی margin رو auto کردین بیاد وسط
توی فایل css قالب ... media@ ها نوعی سلکتور css هستند که درون اونها تعیین می کنید که فلان عنصر در فلان اندازه نمایشگر به چه شکلی در بیاد .. در کل جزو مبحث واکنشگرایی هستند .... شما باید توی فایل های css قالب بگردید و بعد از پیدا کردن media@ درونش جستجو کنید تا نام کلاس یا آی دی موردنظر رو پیدا کنید ...