رفتن به مطلب

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

سلام

من یه قسمت از سایتم به این شکل کد نویسی شده


<header>
<div class="masthead">
<div class="masthead-body">
<div class="email"><i class="fa fa-envelope" style="color:#758594; margin:13px 0px 0px 30px;"></i><p>Email : info@mihanwordpress.com</p></div>
<div class="phone"><i class="fa fa-phone-square" style="color:#758594; margin:13px 0px 0px 30px;"></i><p>Phone : +98 21 66 240 209</p></div>
</div>
</div>
</header>

و استایلش هم به این صورت هستش


header {
width: 100%;
height: auto;
background: #34495e;
overflow:hidden;
border-bottom: solid 2px #000000;
border-image: url(img/Freebie-Page-Atech_02.png) 30 30 round;
-moz-border-image: url(img/Freebie-Page-Atech_02.png) 30 30 round; /* Firefox */
-webkit-border-image: url(img/Freebie-Page-Atech_02.png) 30 30 round; /* Safari and Chrome */
-o-border-image: url(img/Freebie-Page-Atech_02.png) 30 30 round; /* Opera */
}
.masthead {
width: 100%;
height: 40px;
background: #2c3e50;
float: right;
margin: 15px 0px 0px 0px;
}
.masthead-body {
width: 1300px;
height: auto;
margin: 0 auto;
}
.email {
float: left;
width: auto;
height: auto;
margin: 0 auto;
}
.email p {
color: #758594;
font: 12px Segoe, "Segoe UI";
float: left;
margin: 13px 0px 0px 10px;
}
.phone {
float: left;
width: auto;
height: auto;
margin: 0 auto;
}
.phone p {
color: #758594;
font: 12px Segoe, "Segoe UI";
float: left;
margin: 13px 0px 0px 10px;
}

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

overflow:hidden; رو حذف میکنم و float که میدم اسکرول به سمت چپ و راست میده ولی دیگه طول 100% از کار میفته و به مشکل میخوره و بخش شماره و ایمیل میریزه

میدونم بهترین حالت رسپانسیو نوشتن سایته ولی احتیاجی به رسپانسیو نیس تازگیا به این مشکل خوردم توی طراحی قبلیم اصلا همچین چیزی نبود . از وب سرور ومپ و

زمپ هم تست کردم ولی درست نشد

rzcmu2fl5v5mjz8lnuif.png

w1wje22823l0aaxqapiq.png

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


لینک به ارسال

.masthead {
min-width: 100%;
overflow:hidden;
height: 40px;
background: #2c3e50;
float: none;
margin: 15px 0px 0px 0px;
}

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


لینک به ارسال


.masthead {
min-width: 100%;
overflow:hidden;
height: 40px;
background: #2c3e50;
float: none;
margin: 15px 0px 0px 0px;
}

سلام متاسفانه باز مشکل پابرجاس هستش

با سپاس

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


لینک به ارسال

سلام

آدرس آنلاین بزارید

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


لینک به ارسال

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

https://chrome.google.com/webstore/detail/responsive-website-tester/eopndgnmfpbhfamlgcfcfedcabbfnkhn?utm_source=chrome-app-launcher-info-dialog

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


لینک به ارسال

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

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

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

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

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

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

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

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


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