رفتن به مطلب

مشکل در طراحی


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

سلام

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


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

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

با سپاس

لینک به ارسال

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

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

لینک به ارسال

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

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

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

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

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

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

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

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

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