رفتن به مطلب

کمک برای ریسپانسیو کردن جعبه جستجو


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

سلام دوستان

یه کمک میخوام از اساتیدی که در این مورد سر رشته دارن. زیاد اطلاعی در این مورد ندارم فقط میدونم نشدنی نیست

خیلی پیچیده نیست

من یه باکس جستجو داخل هدر سایت ایجاد کردم با کد زیر

<div class="serchhead">

<form method="get" id="serchhead" action="http://sitename.ir/">
						
	<input type="text" class="fild" name="s" id="s" placeholder="جستجوی عبارت مورد نظر + اینتر" />			
	<input type="submit" class="submit" value="" style="display:none;" />
	
</form>	

</div>

به همراه کدهای استایل به شکل زیر

    text-align: center;
    float: right;
    font-family: iransans light;
    width: 70%;
    background-color: rgba(248, 248, 248, 0.13);
    border-color: rgba(255, 255, 255, 0.07);
    border-radius: 30px;
    margin-right: 150px;
    margin-left: 150px;
    margin-top: 40px;

حالا در نمای desktop همه چی خوبه. 

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

چه کدهایی رو باید به فایل header.php و یا فایلهای دیگه اضافه کنم ؟

لینک به ارسال

دوستان مشکلم حل شد

این کد رو به هدر اضافه کردم

<meta content="width=device-width, initial-scale=1" name="viewport">  

و ابعاد استاندارد صفحه نمایش های مختلف رو هم به استایل (rtl.css) اضافه کردم. اینطوری :

@media only screen and (max-width: 980px) { 
input#s {
    text-align: center !important;
    float: right !important;
    font-family: iransans light !important;
    width: 70% !important;
    background-color: rgba(248, 248, 248, 0.13) !important;
     border-color: rgba(255, 255, 255, 0.07) !important;
}}

اینو گفتم که اگه احیانا دوستی مشکل من رو داشت , مشکلش حل شه

لینک به ارسال

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

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

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

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

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

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

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

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

×
×
  • اضافه کردن...