hojat910

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

2 پست در این موضوع قرار دارد

سلام دوستان

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

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

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

<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 و یا فایلهای دیگه اضافه کنم ؟

0

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


لینک به پست

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

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

<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;
}}

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

1

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


لینک به پست

برای ارسال نظر یک حساب کاربری ایجاد کنید یا وارد حساب خود شوید

برای اینکه بتوانید نظر ارسال کنید نیاز دارید که کاربر سایت شوید

ایجاد یک حساب کاربری

برای حساب کاربری جدید در انجمن ما ثبت نام کنید. عضویت خیلی ساده است !


ثبت نام یک حساب کاربری جدید

ورود به حساب کاربری

دارای حساب کاربری هستید؟ از اینجا وارد شوید


ورود به حساب کاربری

  • مطالب مشابه

    • توسط hamedgh1373
      سلام اساتید محترم من برای قالبی که طراحی کردم میخواستم منو موبایل ایجاد کنم ولی روی فهرست سایت کلیک که می کنم منو نمایش داده نمیشه ممنون میشم راهنمایی کنید.
      اینام کدهایی که وارد کردم هستن.
       
      کد اچ تی ام ال:
      <a id="menuicon" class="menuicon" href="javascript:void(0);" onclick:"menuclick()">فهرست سایت</a> <div id="mobilemenu" class="mobilemenu"><?php wp_nav_menu( array( 'theme_location' => 'top-menu' ) ); ?></div>  
      کد css:
      @media screen and (min-width:1220px){     .menuicon{         display: none;     } } .mobilemenu{     background: #333;     width: 50%;     position: fixed;     top: 0;     right: -100%;     color: #fff;     height: 100%;     z-index: 200; } .mobilemenu li a{     color: #fff;     line-height: 40px;     padding: 0 20px;     border-bottom: 1px solid #444;     display: block; } .mobilemenu.isopen{     right: 0; }  
       
      کد جاوا اسکریپت:
      function menuclick(){   var x = document.getElementById( "mobilemenu" );   if ( x.className === "mobilemenu" ){     x.className += " isopen";   } else {     x.className = "mobilemenu";   } }  
    • توسط mahdisarlak
      سلام دوستان من میخوام صفحه ایران مال سایتم رو ایندکس کنم ، اما میگه که این صفحه Mobile-friendly نیست  ، ادرس این صفحه از سایتم https://pastor22.com/wp-content/uploads/cache/2018/12/photo_2018-12-06_08-51-37-1/?MA
      چطور میتونم ارور رو رفع کنم؟

    • توسط amer7417
      سلام دوستان
      متاسفانه صفحات یک قالب رو با ویژوال کامپوزر طراحی کردم
      همه چی اوکی بود اما به مشکلی که خوردم ریسپانسیو نبودن صفحات در حالت موبایلی و تبلت بود
      آیا راهی وجود داره که بشه همون مدل دسکتاپ در موبایل و تبلت نمایش داده بشه
      ممنون میشم راهنماایی کنید
       
    • توسط jistili1
      سلام دوستان.من اومدم به قول خودم سایتم رو با استفاده از دستور های media query در css ریسپانسیو کردم.سایتم اینه:namavaz.ir.اومدم برای سایز های مختلف device سایت رو تعریف کردم.ولی الان وقتی سایت رو باز میکنید اصلا کاری به مدیاکوئری ها نداره.همون صفحه ای که روی لپتاپم میاره رو روی موبایل میاد زوم بک میکنه.اگه سایز مرورگر رو توی لپتاپ تغییر بدم مدیاکوئری ها کار میکنن ولی روی موبایل مشکل داره.ممنون میشم راهنمائیم کنید.
    • توسط Hassan Hesampour
      سلام دوستان وقتتون بخیر
      آقا ما یه سایت داریم به آدرس : dryouclinic.com 
      توی قسمت بلاگ ( نوشته های سایت ) بخصوص مطالبی که اخیرا توی سایت درج شده ، ریسپانسیو مطالب دچار مشکل شده
      یعنی الان هر نویسنده ای که بخواد مطلب جدید بذاره نحوه چیدمان نوشته ها میریزه بهم
      تمام افزونه ها رو غیر فعال کردم بازم نشد
      مشکل از خود قالب هست اما نمیدونم چه مشکلی برای قالب پیش اومده که جدیدا وقتی مطلب میذاریم میریزه بهم ، یادم هم نمیاد که چه تغییری توی سایت دادیم که این مشکل پیش اومد
      عکس ضمیمه رو ببینید تا بهتر متوجه منظورم بشید ، ممنون میشم اگر کسی مشکل رو فهمید کمکم کنه